標簽表單字段對齊CSS

Question

如何使表單字段的標簽與帳單地址標題垂直對齊？ http://jsfiddle.net/DA9gK/1/

<h4 class="billingAddress">Billing Address</h4>

<div class="control-group">
    <label class="control-label" for="inputEmail">Company Name</label>
    <div class="controls">
        <input type="text" id="inputEmail">
    </div>
 </div>

Answer 1

加

.form-horizontal .control-label {
     text-align: left;
  }

到您的CSS部分...這是您想要的嗎？

Answer 2

看一下css box模型 ，如果可以實現，則間距問題應該消失了。 浮點數是其他要考慮的問題，但是...您將從此處特別受益...我找不到指向的鏈接，因此請執行以下操作：

<div id="head"></div>
<div id="nav"></div>
<div id="wrapper"></div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="footer"></div>

您可以根據自己的風格在head和nav之間共享一條線，您的左側表單對象進入leftcolumn，從右側進入右側，頁腳通常保持其自己的線。 這取決於包裝的絕對位置以及我相信的所有其他內容的相對位置。 浮動元素也可以使用，但靈活性較差。

這種方法應該使您能夠控制使頁面“提琴手”示例看起來不錯的間距。