HTML + CSS 수평 정렬 된 폼 요소

Question

: 이

기능 : 나는 다음과 같은 이미지를 보여 것처럼 보이는 그 결과이 양식 스타일을 원하는

<form id="contact-form"> 
    <label for="form-company">Company</label> 
    <input id="form-company" name="form-company" type="text"> 

    <label for="form-name">Name</label> 
    <input id="form-name" name="form-name" type="text" required> 

    <label for="form-email">Email</label> 
    <input id="form-email" name="form-email" type="email" required> 

    <label for="form-tel">Phone</label> 
    <input id="form-tel" name="form-tel" type="tel" required> 

    <label for="form-message">Message</label> 
    <textarea id="form-message" name="form-message" required> 
    </textarea>    

    <input type="submit" value="Submit"> 
</form> 

가장 잘 호환되는 방법?

Answer 1

일련의 부동 div를 사용하면 매우 간단하게 처리 할 수 ​​있습니다. 나는 당신이 무엇을 찾고 있는지에 아주 가까이 있어야 할 jsFiddle을 만들었습니다 http://jsfiddle.net/xgNBv/

Answer 2

이 바이올린처럼 될 것입니다 추가 HTML 마크 업을 필요로하지 않는 순수 CSS 솔루션 : http://jsfiddle.net/TBwQh/27/. 이것은 IE8 +에서 작동하며, IE7에서 작동하도록 조정될 수 있습니다 (IE7에서는 위쪽 여백 조정이 필요함). 그러나 IE7에서는 수직선을 파선으로 표시하지 않습니다.

CSS의는 다음과 같습니다

#contact-form { 
    width: 600px; 
} 

#contact-form label { 
    display: inline-block; 
    width: 176px; 
    height: 1em; 
    padding: 1.5em 424px 1.5em 0; 
    margin-right: -412px; 
    text-align: right; 
    border-bottom: 1px dashed #bbbbbb; 
    position: relative; 
} 

#contact-form label:after { 
    content: ''; 
    display: inline-block; 
    position: absolute; 
    width: 0; 
    border-right: 1px dashed #bbbbbb; 
    top: 0; 
    bottom: 0; 
    margin: 0 0 0 12px; 
} 

#contact-form input, 
#contact-form textarea { 
    display: inline-block; 
    width: 376px; 
    height: 3em; 
    margin: .5em 12px; 
    vertical-align: middle; /* textarea needed this */ 
} 

#contact-form input[type=submit] { 
    width: 200px; 
    margin-left: 188px; 
} 

은 물론, 약간의 조정은 크기에 할 수 있습니다. 하나는 css의 "복잡성"또는 IE7 이하에서 완전히 동일한 모양을 얻지 못하는 것이 이미 언급 한대로 테이블 또는 추가 div 경로를 가지 않는 것이 가치가 있는지 평가해야합니다.

Answer 3

나는 table 접근 방식을 사용하여이 작업을 수행했습니다.

HTML :

<form id="contact-form"> 
    <table> 
     <tr> 
      <td><label for="form-company">Company:</label></td> 
      <td><input id="form-company" name="form-company" type="text"></td> 
     </tr> 
     <tr> 
      <td><label for="form-name">Name:</label></td> 
      <td><input id="form-name" name="form-name" type="text" required></td> 
     </tr> 
     <tr> 
      <td><label for="form-email">Email:</label></td> 
      <td><input id="form-email" name="form-email" type="email" required></td> 
     </tr> 
     <tr> 
      <td><label for="form-tel">Phone:</label></td> 
      <td><input id="form-tel" name="form-tel" type="tel" required></td> 
     </tr> 
     <tr> 
      <td><label for="form-message">Message:</label></td> 
      <td><textarea id="form-message" name="form-message" required></textarea></td> 
     </tr> 
    </table> 

    <input type="submit" value="Submit"> 
</form> 

CSS :

*   { margin:0; } 
html, body { height: 100%; } 

#contact-form { 
    height:  100%; 
    margin:  0 auto; 
    width:  75%; 
    text-align: center; 
} 

#contact-form table { margin: 0 auto; width: 100%; } 

#contact-form td:nth-of-type(odd) { width: 25%; } 
#contact-form td:nth-of-type(even) { width: 75%; } 
#contact-form td:nth-of-type(odd) * { float: right; padding-right: 10%; } 
#contact-form td:nth-of-type(even) * { width: 100%; } 

#contact-form table textarea { resize: none; } 
#form-submit     { width: 25%; }