HTML + CSS水平排列表單元素

Question

考慮下面的HTML代碼：

<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

一個純CSS解決方案，不需要任何額外的HTML標記會是這樣的小提琴：http://jsfiddle.net/TBwQh/27/。這可以在IE8 +中使用，並且可以在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%; }