3

我有两个带标签的表单控件。我希望标签出现在控件上方，但控件彼此相邻。我可以弄清楚如何做一个或另一个，但不能两者兼而有之。

我目前有

<div class="control-group">
    <label class="control-label" for="select1">Select1</label>

    <div class="controls">
        <select id="select1">
            <option value="abc">ABC</option>
            <option value="def">DEF</option>
        </select>
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="text1">Text1</label>

    <div class="controls">
        <input id="text1"/>
    </div>
</div>

jsfiddle 是http://jsfiddle.net/BA4g7/

如何使两个控制组彼此水平对齐？我需要把它们排成一排吗？

4

2 回答 2

4

这看起来不错：

.control-group {
    display: inline-block;
    vertical-align: top;
}

但是，如果您希望保证它保持在线（而不是用窄屏幕宽度包裹），那么您需要将它包裹在另一个中div并设置white-space: nowrap它，就像这个例子一样。

此外，如果你想让它看起来更好，你需要在文本输入上进行一些尺寸标注，这样的东西在我的 FF 浏览器中看起来不错：

#text1 {
    height: 20px;
    padding: 4px 0;
}
于 2013-06-21T18:22:47.710 回答
0

我认为最好的方法是在引导后加载的外部 css 中添加一个自定义 css 类，以覆盖您可能想要更改的本机类。我个人每次使用引导程序时都会这样做。

所以我创建了这个类来解决这个问题

.makeHorizontal{
  float:left;
  padding-left:20px;
}

现场演示在这里。

于 2013-06-21T18:32:25.013 回答