html - 标签表单字段对齐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

看看 css盒子模型，如果你能实现它，你的间距问题应该会消失。浮动是其他一些需要考虑的因素，但是......你会从这里特别受益......我找不到链接，所以这样做：

<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，右侧进入右侧，页脚通常保持自己的线条。这依赖于包装器的绝对定位和我相信的其他一切的相对定位。浮点数也可以，但被认为不太灵活。

这种方法应该让您能够控制使您的页面“提琴手”示例看起来不错所需的间距。

Answer 2

添加

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

到您的 CSS 部分...这是您想要的吗？