양식의 모든 입력을 정렬하는 방법

Question

모든 입력의 왼쪽을 함께 정렬하는 방법을 알아 내려고하고 있습니다. 현재 전체 요소 행이 왼쪽으로 정렬되므로 모든 입력 필드가 엇갈리게 배치됩니다. 나는 입력을 비틀 거리고 싶지 않다. 라벨 텍스트를 오른쪽 정렬하고 입력을 모두 정렬해야한다. 난 무작위 CSS를 잔뜩 시도했지만, 그것을 알아낼 수 없습니다. 어떤 아이디어?

<form> 

    <div class="element"><label>Name:</label><input name="Name" type="text" /></div> 
    <div class="element"><label>Email:</label><input name="Email" type="text" /></div> 
    <div class="element"><label>Phone:</label><input name="Phone" type="text" /></div> 
    <div class="element"><label>Address Line 1:</label><input name="Address1" type="text" /></div> 
    <div class="element"><label>Address Line 2:</label><input name="Address2" type="text" /></div> 
    <div class="element"><label>City:</label><input name="City" type="text" /></div> 
    <div class="element"><label>State:</label><input name="State" type="text" /></div> 
    <div class="element"><label>Zip Code:</label><input name="ZipCode" type="text" /></div> 
    <div class="element"><label>Birth Date:</label><input name="Bdate" type="text" /></div> 
    <div class="element"><label>Class Selection:</label><input name="Class" type="text" /></div> 
    <div class="element"><label>Preferred Meeting Time:</label><input name="Time" type="text" /> </div> 

</form> 

#registerwrapper .element { 
margin-bottom: 15px; 
vertical-align: middle; 
} 

#registrationwrapper label * { 
float: left; 
font-size: 16px; 
} 
#registrationwrapper input { 
padding: 5px; 
margin-left: 10px; 
} 

Answer 1

안녕하세요 지금

Live demo

Answer 2

귀하의 질문에 직접 대답이 당신의 라벨Display inline-block;에주고 레이아웃에 따라 width에 줄이 스타일 시트에 사용 :

label { 
    display: block; 
    margin-right: 5px; /* give some breathing room between your label and inputs */ 
    padding-top: ?px; /* add this if you're v-aligning to top to adjust the label alignment to the input */ 
    text-align: right; 
    vertical-align: top; /* add this when you've got larger fields like textareas bumping things out of alignment */ 
    width: ?px; 
} 

그러나 div/레이어를 사용하여 모든 라벨/필드 조합을 왜 래핑하는지 묻는 마음이 강하게 느껴 집니까? 다음과 같이 문단을 대신 사용하는 것이 좋습니다.

<form> 
    <p> 
     <label for="">Field</label> 
     <input id="" /> 
    </p> 
</form> 

또한 각 행에 클래스를 추가 할 필요가 없습니다. 그냥 다음과 같이하십시오.

form p { 
} 

form p label { 
} 

form p input { 
} 

이제 클라이언트에 보내는 바이트 수가 훨씬 적어 HTML을 읽기가 훨씬 쉽습니다.

Answer 3

는

링크 참조, 일부 코드를 변경 했 : http://jsfiddle.net/anglimass/V4HAM/8/