Question

我有一些文字，一个下拉框和一个按钮。使用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/

任何想法都可以直截了当地让它看起来很美观（或多或少）？

Answer 1

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

<强> DEMO

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;
}

Answer 2

尝试添加vertical-align: top;

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

选中此JSFiddle

Answer 3

查看bootstrap的大量文档：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。

查看文档，它会显示您可以使用bootstrap执行的所有可能组合。这应该是第一个看起来的地方，因为它可能是由bootstrap编写者编写的最佳资源。

Answer 4

对于上面的html，以下css工作正常，可以让它们在一条直线上

table tr:first-of-type
{
    vertical-align:top;
}

无法使html元素出现在一行中

4 个答案: