如何强制按钮和选择在同一行？答案

【问题标题】：How to force button and select on the same line?如何强制按钮和选择在同一行？
【发布时间】：2015-08-05 10:20:40
【问题描述】：

我的网站上有一个表单，我想在同一行放置一个按钮和选择标签，但它一直导致换行。我尝试了一个按钮，它在一条线上一个接一个地工作得很好。我正在使用引导程序 3。

<div class="panel-footer" style ="overflow: hidden; white-space: nowrap;">
    <button type="submit" class="btn btn-success" style="width:100px; margin:4px;">send</button> 
    <button type="submit" class="btn btn-success" style="width:100px; margin:4px;">send</button> 
    <select class="form-control" style = "width:100px; margin:4px;">
        <option value="volvo">Math</option>
        <option value="saab">History</option>
        <option value="opel">English</option>
        <option value="audi">Gymnastics</option>
    </select>
</div>

有足够的空间可以再进行 4 次选择。

【问题讨论】：

我只是复制粘贴这段代码，它在同一行显示两个按钮和一个选择框。我无法重现这个问题。但是您可以在 css 中为按钮和选择框尝试“float:left”选项。
这是因为它可能已经在其中的其他 div，两个控件的浮动也使面板缩小但控件部分留在外面。 @anuja

标签： html css twitter-bootstrap select

【解决方案1】：

在选择和按钮上使用display: inline; 或display: inline-block;

【讨论】：

【解决方案2】：

您可以将选择和按钮放在表格中。

为我工作。真的很简单。

<table>
<tr>
<td>
<select>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</td>
<td>
<input type="submit" value="Choose number">
</td>
</tr>
</table>

【讨论】：

使用表格进行样式/布局是不好的做法并且有问题，相反，使用 CSS，使用 HTML 元素进行样式会破坏关注点分离的最佳实践。 HTML 用于结构，CSS 用于样式。希望这是有道理且具有建设性的。