2013-03-21 116 views
0

我有一个奇怪的情况,我有一个表,在每一行我有一个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> 

+0

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

+0

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

+0

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

回答

1

<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> 
} 
+0

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

相关问题