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

问题描述：

我有一个奇怪的情况，我有一个表，在每一行我有一个Ajax形式。 Form不允许在tr，但允许在td。所以我必须将所有栏放在td内，并手动匹配尺寸。问题在于HtmlHelpers（ASP.Net MVC Razor）添加的填充和边距，导致内容不能在正确的标题列下对齐。Html CSS - 将样式应用于类中的所有元素？

我需要写一个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>

理论上，'td.noMarginAndPadding * {余量：0;填充：0; }'应该这样做。如果你可以使用相关的样式表来http://jsfiddle.net你的客户端表单，它会更容易一些。 – 2013-03-21 02:57:52

恐怕不行。我尝试了同样的事情。根据浏览器排序（class =“firefox”等），我有一个php脚本动态地为html标签分配一个类。这工作。另外，我把它放在我的CSS中：'.opera * {letter-spacing：.002em}'，但那不起作用。 – 2013-03-21 03:09:33

添加子组合选择器（>）有什么区别吗？即td.noMarginAndPadding> * {margin：0;填充：0; } – lukeocom 2013-03-21 03:18:14

答

<span> s为他们不能接受的宽度，高度的内联元件..

为了允许接受宽度，添加显示：块;到Span的CSS。

否则，使用代替跨度股利

@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> 
}

做了伎俩。谢谢 – aryaxt 2013-03-21 15:09:42

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

相关推荐