Question

我有一个奇怪的情况，我有一张桌子，每排都有一个ajax表格。 Form中不允许tr，但td允许这样做。所以我必须将所有列放在td内并手动匹配大小。问题是HtmlHelpers（ASP.Net MVC Razor）添加的填充和边距，导致内容不在正确的标题列下对齐。

我需要编写一个css，在给定的类中递归删除所有项的边距和填充。我怎么能这样做？

或者是否有更简单的方法强制对齐标题下的内容？

<table style="width: 100%">
<thead>
    <tr>
        <th style="width: 5%">Id</th>
        <th style="width: 35%">Material</th>
        <th style="width: 60%">Description</th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model.items){
        <tr>
            <td class="noMarginAndPadding" colspan="3">
            @using (@Ajax.BeginForm()){
                <span style="width: 5%">@Html.TextBoxFor(i => item.Id)</span>
                <span style="width: 35%">@Html.TextBoxFor(i => item.Name)</span>
                <span style="width: 60%">@Html.TextBoxFor(i => item.Description)</span>
            }
             </td>
        </tr>
    }
</tbody>

Answer 1

<span>是内联元素，它们无法接受宽度，高度..

要允许接受宽度，请添加display：block;到Span的CSS。

否则使用Div而不是Span

@using (Ajax.BeginForm("Result", new AjaxOptions { UpdateTargetId ="result"}))
 {
      <div style="width:5%;float:left;text-align:center" >@Html.TextBoxFor(i => item.Id)</div>
      <div style="width: 35%;float:left;text-align:center">@Html.TextBoxFor(i => item.Name)</div>
      <div style="width: 60%;float:left;text-align:center">@Html.TextBoxFor(i => item.Description)</div>
 }

Html CSS - 将样式应用于类中的所有元素？

1 个答案: