0

我有一些文本、一个下拉框和一个按钮。使用 twitter bootstrap 2.3.2 时，我无法让它出现在一行中

<div class="well">
    <table>
        <tr>
            <td>Select Company</td>
            <td>
                <select class="span3">
                    <option value="0">Compa1</option>
                    <option value="0">Compa1</option>
                </select>
            </td>
            <td>
                <input type="button" class="btn" value="Go" />
            </td>
        </tr>
    </table>
</div>

如果您想了解我尝试过的其他变体，请尝试以下小提琴：

http://jsfiddle.net/deostroll/9Hg3K/1/

有什么想法可以将它放在一条直线上并使它看起来很美观（或多或少）？

4

4 回答 4

2

像这样margin-bottom:0;在下面添加selector。

演示

CSS 

.sameline {
    display:inline-block;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{
    margin-bottom:0;
}

label {
    display:inline-block;
    margin-bottom: 5px;
}
于 2013-09-02T09:59:44.423 回答
1

查看引导程序的大量文档：http: //getbootstrap.com/2.3.2/base-css.html#forms

只需这样做，您的表格将在一行中：

<form class="form-inline">
<label>Select Company</label>
<select class="span3">
    <option value="0">Compa1</option>
    <option value="0">Compa1</option>
</select>
<input type="button" class="btn" value="Go" />
</form>

此表单全部显示在一行上，并且表单位将进入您想要的 div/table 中。

查看文档，它向您展示了您可以使用引导程序进行的所有可能组合。这应该是第一个看的地方，因为它可能是引导程序作者编写的最佳资源。

于 2013-09-02T10:04:30.590 回答
1

对于上面的 html ，遵循 css 可以很好地将它们放在一条直线上

table tr:first-of-type
{
    vertical-align:top;
}
于 2013-09-02T10:42:45.733 回答
1

尝试添加vertical-align: top;

.sameline {
    display: inline-table;
    vertical-align: top;
}

检查这个JSFiddle

于 2013-09-02T10:01:32.343 回答