如何在<a标签中将两列对齐

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 宽度属性。

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

相应地设置 td 的大小。

你可能想看看Twitter Bootstrap，这个库让CS​​S很容易用类来操作

更新：

使用 % 代替像素很难在小样本中显示。我不知道您在切换媒体时希望您的屏幕是什么样子。可以很简单，就像您希望在交换媒体时缩小屏幕一样。

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

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

随着世界向Write Once, Run Anywhere (WORA) 开发（twitter bootstrap、xamarin、PhoneGap 等）发展，您必须自己决定最适合您的情况。

更新：

Here is a fiddle of what I am suggesting