Question

我的HTML如下。我正在使用twitter bootstrap。

<div class="container">
  <div class="well span4 pull-right">
    <s:bind path="month">
      <label class="control-label" for="month">Date of birth</label>
      <div class="control-group <c:if test="${status.error}">error</c:if>">
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on"><i class="icon-th"></i></span>
            <form:select path="month" class="input-medium inline">
              <form:option value="">Month</form:option>
              <form:option value="1">January</form:option>
              ...
              <form:option value="12">December</form:option>
            </form:select>
          </div>
        </div>
      </div>
    </s:bind>

    <s:bind path="day">
      <div class="control-group <c:if test="${status.error}">error</c:if>">
        <label class="control-label" for="day"></label>
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on"><i class="icon-th"></i></span>
            <form:select path="day" class="input-small">
              <form:option value="">Day</form:option>
              <form:option value="1" />
              ...
              <form:option value="31" />
            </form:select>
          </div>
        </div>
      </div>
    </s:bind>

    <s:bind path="year">
      <div class="control-group <c:if test="${status.error}">error</c:if>">
        <label class="control-label" for="year"></label>
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on"><i class="icon-th"></i></span>
            <form:select path="year" class="input-small">
              <form:option value="">Year</form:option>
              <form:option value="2010" />
              ...
              <form:option value="1940" />
            </form:select>
          </div>
        </div>
      </div>
    </s:bind>
  </div>
</div>

目前，它们已按快照中所示对齐。

enter image description here

我如何将它们排成一排？

Answer 1

选择不是块级元素，因此如果没有将它们包装到不同的div并放入相同的div而是，它们将在行中没有任何浮动。

目前你的结构是这样的（缩短的）：

<div class="control-group">
  <div class="controls">
      <select>...</select>
  </div>
</div>
<div class="control-group">
  <div class="controls">
      <select>...</select>
  </div>
</div>
...

如果您将所有select放入相同的div.controls ，您将得到您想要的内容：

<div class="control-group">
  <div class="controls">
      <select>...</select>
      <select>...</select>
      ...
  </div>
</div>

如果这仍然没有帮助，那么CSS样式可能会有些混乱。在这种情况下，请确保您的选择具有内联块显示属性，方法是将select{display:inline-block}添加到您的CSS或在style标记本身上设置select属性：<select style="display:inline-block">

UPD：从您的课程名称中我得出您正在尝试制作水平表格。在这种情况下，类的含义如下：

<div class="control-group">包装了一对标签和控件行：
- <label class="control-label＆GT;是该行的标签，它将在左侧
- <div class="controls">是将在标签

因此，带有class="controls"的div意味着Bootstrap devs是控件行。这就是为什么如果你想要控件连续 - 只需将它们全部放入这一个div。

此外，您应将所有代码包装到<form class="form-horizontal>中，以便获得适当的边距和对齐。 Read the docs on Bootstrap forms了解更多详情。

Answer 2

您可以使用以下命令将父DIV（超过所有选择）浮动到CSS：

float:left;

电贺马克

Answer 3

简单的解决方案是将它们放在桌子上！

    <table border="0">
<tr>
<td>

Select 1

</td>
<td>
Select 2

</td>
<td>

Select 3


 </td>
 </tr>
 </table>

易于操作并且运作良好！

对齐3个<select>框连续</select>

3 个答案: