텍스트 필드 레이블로 정렬

Question

레이블이 해당 텍스트 필드에 정렬되게하고 싶습니다. 그러나 여기에 게시 된 스 니펫 코드는 다음 UI를 반환합니다. 실제로 첫 번째 행 (20 -> First)은 내가 구현하고자하는 올바른 형식입니다. 라파엘 답변에 따라

업데이트 그림. 이러한 요소를 표시 할 공간이 제한되어 있습니다. 6 자 이상인 곳이라면 어디서나 할당 된 공간으로 퍼지지 않습니다. 하지만 내가 어떻게 할 수 없었다,

input[type="text"]{ 
     display:inline; 
     margin-bottom:10px; 
     margin-right:3px; 
     width: 50px; 
     text-align:center; 
     clear: left; 
}  


label { 
     color: white; 
     display: inline-block; 
} 

ul { 
padding: 0; 
list-style-type: none; 
} 


<ul> 
<li><label for="first">First</label><input type="text" value="Loading..." id="firstTF"/></li> 
<li><label for="second">Second</label><input type="text" value="Loading..." id="secondTF"/></li> 
<li><label for="third">Third</label><input type="text" value="Loading..." id="thirdTF"/></li> 
<li><label for="fourth">Fourth</label><input type="text" value="Loading..." id="fourthTF"/></li> 
<li><label for="fifth">Fifth</label><input type="text" value="Loading..." id="fifthTF"/></li> 
<li><label for="sixth">Sixth</label><input type="text" value="Loading..." id="sixthTF"/></li>  <li><label for="seventh">Seventh</label><input type="text" value="Loading..." id="seventhTF"/> </li> 
    </ul> 

Answer 1

당신은 당신의 입력 후 라벨을 넣을 수있는 수정하지 않습니다? 그런 다음 입력에서 float: left을 제거하십시오.

JSFiddle

당신이 요소의 순서를 변경하지 않으려면, 당신은 this JSFiddle

을 편집 편집에 대해

처럼, 당신의 li에 overflow: hidden을 추가 할 수 있습니다 그 어떻게 해결하고 싶은지에 달려 있습니다. 텍스트가 표시해야하는 공간보다 텍스트가 더 커지면 무엇을하고 싶습니까?

당신은, 예를 들어, 최대 폭을 설정할 수 있으며, 여기에 예상되는 결과를 제공 this JSFiddle

Answer 2

처럼 오버 플로우 텍스트를 숨기 :

<style type="text/css"> 

input[type="text"]{ 
     display:inline; 
     margin-bottom:10px; 
     margin-right:3px; 
     width: 50px; 
     text-align:center; 
     clear: left; 
}  

label { 
     color: black; 
     display: inline-block; 
     text-align: right; 
     float: right; 
} 

ul { 
    padding: 0; 
    list-style-type: none; 
    float: left; 
} 
</style>  

<ul> 
<li><div id="ligne"><label for="first">First</label><input type="text" value="Loading..." id="firstTF"/></div></li> 
<li><label for="second">Second</label><input type="text" value="Loading..." id="secondTF"/></li> 
<li><label for="third">Third</label><input type="text" value="Loading..." id="thirdTF"/></li> 
<li><label for="fourth">Fourth</label><input type="text" value="Loading..." id="fourthTF"/></li> 
<li><label for="fifth">Fifth</label><input type="text" value="Loading..." id="fifthTF"/></li> 
<li><label for="sixth">Sixth</label><input type="text" value="Loading..." id="sixthTF"/></li>   
<li><label for="seventh">Seventh</label><input type="text" value="Loading..." id="seventhTF"/> </li> 
    </ul>