Question

我有以下适用于表格的CSS：

.myTable
{
  width: 99%;
  border-collapse:collapse;
  word-wrap:break-word;
  border:1px solid #28282C;
  background-color: #F7F6F3;
}

.myTable td
{    
  padding: 16px 4px 0px 4px;
  text-align:left;
  vertical-align:top;    
}

因为我不希望将填充应用于表格中的表单元素，所以我也有这个CSS：

.myTable td input
{    
  padding:0px 0px 0px 0px !important;     
}

然而，这不起作用。衬垫固执地保持不动，除非我放入更大的衬垫。例如，如果我这样做：

.myTable td input
{    
  padding:50px 50px 50px 50px !important;     
}

然后使用较新的巨大填充正确覆盖表单元素。我在这里错过了什么？如何使用CSS覆盖/取消子元素的填充？

编辑：我在挖掘渲染的HTML后想通了。输入元素很好，原因是ASP.NET在其自己的TD中的一个checkboxlist中呈现每个复选框，它从样式表接收填充并使其看起来像输入被填充。谢谢大家

Answer 1

这与你输入的完全一样。您已将填充应用于TD。这适用于每个TD的填充，无论其中包含什么。

除了 TD上的填充设置之外，您的第二种输入样式将是。所以它不会覆盖任何东西。

您可以尝试将负边距应用于INPUT以对抗父TD中的填充。不确定所有浏览器是否都喜欢这样。

或者，给TD输入他们自己的类：

<td class="withInput">

然后你可以在你的css中使用这个选择器：

td.withInput {padding: 0px;}

Answer 2

您的代码没有任何问题。您甚至可以删除INPUT的CSS。 INPUT不会从父TD继承填充值。向我们展示页面，以便我们为您提供帮助。

唯一的问题是IE7及更早版本。在这种情况下，请为您的INPUT元素使用NEGATIVE MARGIN。

IE7和IE6的黑客

input{
*margin: -2px;
_margin: -2px;
}

无法覆盖CSS填充

2 个答案: