Question

当我在LI元素内部时，我发现了一个非常奇怪的边缘行为。在LI内部，TABLE在顶部有额外的边距，使用“margin”或“padding”CSS样式无法取消。取消此操作的唯一方法是为LI设置“display：block”（默认情况下为“display：list-item”）。这是代码：

<!DOCTYPE html>
<html>
  <head>
      <title>Strange table margin behaviour</title>
  </head>
  <body>
    <ul>
      <li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li>
      <li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li>
      <li style="border: 1px solid #009; margin: 0; padding: 0;"><table style="border: 1px solid #ccc; margin: 0; padding: 0;"><tr><td>test</td></tr></table></li>
    </ul>
  </body>
</html>

这在Google Chrome中呈现为：

screenshot #1

我期待：

screenshot #2

我真的不明白为什么这个边缘会发生？ LI本身没有任何填充，TABLE没有任何边距，但是在一起......

UPD。此保证金仅出现在谷歌浏览器（24.0.1312.68）中。在Mozilla Firefox（18.0.2）中没有边距，页面看起来像预期的那样（截图＃2）。

Answer 1

虽然我认为更好的实现方法是在 li 标记内部使用浮动div来存放表单，但是您在HTML设置中看到的间距问题的解决方案是添加 display：inline-table 样式到表标签。（代码复制如下;请注意我将CSS移动到标题中，而不是在标记中内联。）

关于这一点的说明：在IE 7及更低版本中根本不支持inline-table属性，你需要注意IE 8中的doctype。这应该在FF，Chrome和IE中正常工作9。

请参阅：http://www.w3schools.com/cssref/pr_class_display.asp

 <!DOCTYPE html>
    <html>
      <head>
          <title>Strange table margin behaviour</title>
          <style type="text/css">
            li { border: 1px solid #000099; margin: 0; padding: 0; }
            table { border: 1px solid #ccc; display: inline-table; margin: 0; padding: 0; }
          </style>
      </head>
      <body>
        <ul>
          <li><table><tr><td>test</td></tr></table></li>
          <li><table><tr><td>test</td></tr></table></li>
          <li><table><tr><td>test</td></tr></table></li>
        </ul>
      </body>
    </html>

Answer 2

该渲染看起来对我来说是正确的。如果你指的是左侧的大空间，那就是UL的一部分。

Answer 3

如上所述，渲染看起来很好。您所指的额外保证金是多少？

更简洁的方法是省略list标签，只是自己定位表元素。或者将它们包装在div中以获得更大的灵活性。我创建了一个jsFiddle作为示例.. http://jsfiddle.net/Lz9fu/2/

<div id="table_c">
      <table><tr><td>test</td></tr></table>
      <table><tr><td>test</td></tr></table>
      <table><tr><td>test</td></tr></table>
</div>

LI元素内的奇怪的TABLE边缘行为

3 个答案: