試圖保持在同一水平線上的兩個按鈕和段落在同一行在表

Question

這裏的圖片 http://imgur.com/a/4gP06 我基本上希望 - 按鈕被直接留在「1」和+的權利「1」。 正在使用彈簧模型中的數據填充行。

<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th>Product</th> 
     <th>Quantity</th> 
     <th>Price</th> 
     <th>Total Price</th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr th:each="cartLine : ${cartLines}"> 
     <td> 
     <a th:href="@{|/product/${cartLine.product.id}|}" th:text="${cartLine.product.title}"></a> 
     </td> 
     <td> 
      <p> 
      <form th:action="@{|/cart/decrease/${cartLine.product.id}|}" method="post"> 
       <input type="submit" class="btn btn-primary" id="decreaseCartLine" value="-"/> 
      </form> 
      <p th:text="${cartLine.quantity}"></p> 
      <form th:action="@{|/cart/increase/${cartLine.product.id}|}" method="post"> 
       <input type="submit" class="btn btn-primary" id="increaseCartLine" value="+"/> 
      </form> 
      </p> 
     </td> 

     <td th:text="${cartLine.product.price}">price</td> 
     <td th:text="${cartLine.totalPrice}">total price</td> 


     <td><form th:action="@{|/cart/remove/${cartLine.product.id}|}" method="post"> 
      <input type="submit" class="btn btn-primary" id="removeCartLine" value="Remove Item"/> 
     </form> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

更新

檢查演示here

而不table結構變化的內現有代碼的另一種選擇td

<td class="qtyWidth"> 
     <table> 
      <tr> 
      <td> 
       <form th:action="@{|/cart/decrease/${cartLine.product.id}|}" method="post"> 
       <input type="submit" class="btn btn-primary" id="decreaseCartLine" value="-" /> 
       </form> 
      </td> 
      <td> 
       <span class="qtyNumber" th:text="${cartLine.quantity}">11</span> 
      </td> 
      <td> 
       <form th:action="@{|/cart/increase/${cartLine.product.id}|}" method="post"> 
       <input type="submit" class="btn btn-primary" id="increaseCartLine" value="+" /> 
       </form> 
      </td> 
      </tr> 


     </table> 
     </td> 

CSS：

.qtyWidth { 
    width: 150px; 
} 
.qtyNumber { 
margin: 0 5px; 
} 

嘗試用自舉功能input-group組件

檢查工作演示here

HTML：

<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th>Product</th> 
     <th>Quantity</th> 
     <th>Price</th> 
     <th>Total Price</th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr th:each="cartLine : ${cartLines}"> 
     <td> 
     <a th:href="@{|/product/${cartLine.product.id}|}" th:text="${cartLine.product.title}"></a> 
     </td> 
     <td class="qtyWidth"> 
     <div class="input-group"> 
      <span class="input-group-btn"> 
          <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]"> 
           <span class="glyphicon glyphicon-minus"></span> 
      </button> 
      </span> 
      <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10"> 
      <span class="input-group-btn"> 
          <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]"> 
           <span class="glyphicon glyphicon-plus"></span> 
      </button> 
      </span> 
     </div> 
     </td> 

     <td th:text="${cartLine.product.price}">price</td> 
     <td th:text="${cartLine.totalPrice}">total price</td> 


     <td> 
     <form th:action="@{|/cart/remove/${cartLine.product.id}|}" method="post"> 
      <input type="submit" class="btn btn-primary" id="removeCartLine" value="Remove Item" /> 
     </form> 
     </td> 
    </tr> 
    </tbody> 
</table> 

CSS：

.form-control { 
    height: auto; 
} 
.qtyWidth { 
    width: 150px; 
} 

Answer 2

如何將三個物品放入引導行內？ 你也許可以優化這個更多，但以下似乎爲我顯示效果細膩：

<div class="container fluid" style="max-width: 200px;"> 
    <div class="row"> 
    <div class="col-4"><form th:action="@{|/cart/increase/${cartLine.product.id}|}" method="post"><input type="submit" class="btn btn-primary" id="decreaseCartLine" value="-"/></div> 
    <div class="col-4"><p th:text="${cartLine.quantity}"></p></div> 
    <div class="col-4"><form th:action="@{|/cart/increase/${cartLine.product.id}|}" method="post"><input type="submit" class="btn btn-primary" id="increaseCartLine" value="+"/></div> 
    </form></div> 

Answer 3

嘗試沒有「P」標籤。因爲，段落標籤通常佔滿。