Question

我尝试对齐或将此HTML放在同一行

实际输出如下所示

 Cart:

 Payment >>

 Add another item >>

 Product    Price   Quantity

 Toaster    19.99    1         Update Cart                            
                                             Remove from Cart <== I want this column align with
                                                                  the update cart or on the same
                                                                  line

 Total                     19.99

我想在不同的行上更新购物车和删除但是对齐或者让他们在同一条线上

这是Index.cshtml

        @{int ix = 0;}

        @foreach (var item in Model.CartItems)
        {
           <tr id="row-@item.ProductId">
              <td>
                   @Html.ActionLink(item.Produit.Description, "Details", "Product", new { id = 
                        item.ProduitId }, null)
              </td>
              <td>
                @item.Product.Price
              </td>
              <td>
                @Html.TextBoxFor(model => model.CartItems[ix].Quantity, 
                    new  {style = "width:30px; text-align:right;",
                    onkeyup = "clearUpdateMessage();",
                    onchange = "clearUpdateMessage();"
                    }) 
              </td>
              <td>
                <a href="#" class="RefreshQuantity" data-id="@item.PanierId" 
                    id="CartItems_@(ix)__Quantity"> Update Cart >> <a />
              </td>

              <td>
                 <a href="#" class="RemoveLink" data-id="@item.PanierId"> Remove from Cart >> 
                 </a>
              </td>
           </tr>
           ix++;
      }

Answer 1

您需要在各个td上设置css width属性。

 <td style="width: 100px"> //or use % if your planning on multiple media</td>
 <td style="width: 100px:> </td>

相应地设置td的大小。

你可能想看一下Twitter Bootstrap，这个库让CSS很容易用类操作

更新：

使用％代替像素很难在小样本中显示。当您切换媒体时，我不知道您希望屏幕看起来像什么。当交换媒体时，它可以像您希望屏幕缩小一样简单。

 <td style="width: 15%"> </td>

如果你换成像手机一样小的东西，你可能想要更改布局，在这种情况下你需要为特定媒体创建css类。

随着世界向Write Once，Run Anywhere（WORA）开发（twitter bootstrap，xamarin，PhoneGap等）发展，你必须自己决定什么是最适合你的情况。

更新：

Here is a fiddle of what I am suggesting

如何将两列对齐在一起

1 个答案: