如何设置几个表格水平？引导程序答案

【问题标题】：How to set few forms horizontal? Bootstrap如何设置几个表格水平？引导程序
【发布时间】：2017-06-11 15:38:33
【问题描述】：

我在引导程序中设置水平输入和按钮时遇到问题，因为我在一个单元格表中有几个表单。像这样：

<td>

    <form class="form-horizontal" method="post" action="/cart/decrease" >
        {{ csrf_field() }}
        <div class="input-append">
            <input type="hidden" value="{{$cartProduct->getProduct()->id}}" name="productId">
            <input type="submit" class="btn btn-mini" value="-" name="minus">
        </div>
    </form>
    <div>
    <input class="span1" id="appendedInputButtons" size="16"
           type="text" value="{{$cartProduct->getQuantity()}}" readonly>
    </div>
    <form class="form-horizontal" method="post" action="/cart/increase">
        {{ csrf_field() }}

        <div class="input-append">
            <input type="hidden" value="{{$cartProduct->getProduct()->id}}" name="productId">
            <input type="submit" class="btn btn-mini" value="+" name="plus">
        </div>
    </form>
    <form class="form-horizontal" method="post" action="/cart/remove">
        {{ csrf_field() }}

        <div class="input-append">
            <input type="hidden" value="{{$cartProduct->getProduct()->id}}" name="productId">
            <input type="submit" class="btn btn-mini btn-danger" value="delete" name="delete">
        </div>
    </form>

</td>

我应该把 div 中的每个表单都设置为float:left吗？

现在看起来像这样：

【问题讨论】：

标签： html css forms twitter-bootstrap

【解决方案1】：

尝试将其添加到您的 CSS：

td * {
  display: inline-block;
}

或者使用新的 css 规则将新类添加到您想要内联的 <td class="inline-form">：

.inline-form * {
  display: inline-block;
}

.inline-form * {
  display: inline-block;
}

<table>
  <td class="inline-form">

    <form class="form-horizontal" method="post" action="/cart/decrease">
      {{ csrf_field() }}
      <div class="input-append">
        <input type="hidden" value="{{$cartProduct->getProduct()->id}}" name="productId">
        <input type="submit" class="btn btn-mini" value="-" name="minus">
      </div>
    </form>
    <div>
      <input class="span1" id="appendedInputButtons" size="16" type="text" value="{{$cartProduct->getQuantity()}}" readonly>
    </div>
    <form class="form-horizontal" method="post" action="/cart/increase">
      {{ csrf_field() }}

      <div class="input-append">
        <input type="hidden" value="{{$cartProduct->getProduct()->id}}" name="productId">
        <input type="submit" class="btn btn-mini" value="+" name="plus">
      </div>
    </form>
    <form class="form-horizontal" method="post" action="/cart/remove">
      {{ csrf_field() }}

      <div class="input-append">
        <input type="hidden" value="{{$cartProduct->getProduct()->id}}" name="productId">
        <input type="submit" class="btn btn-mini btn-danger" value="delete" name="delete">
      </div>
    </form>

  </td>
</table>

【讨论】：