1

I found a very strange margin behaviour for table when it's inside LI element. Inside LI the TABLE has additional margin at the top which cannot be cancelled by using "margin" or "padding" CSS styles. The only way to cancel this -- is to set "display: block" for LI (by default it's "display: list-item"). Here is the code:

<!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>

This renders in Google Chrome as:

screenshot #1

I expect:

screenshot #2

I really not understand why this margin happens? LI itself does not have any paddings, TABLE does not have any margins, but together...

UPD. This margin appears only in Google Chrome (24.0.1312.68). In Mozilla Firefox (18.0.2) there is no margin, and page looks as expected (screenshot #2).

4

3 回答 3

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>
于 2013-02-14T06:01:41.877 回答
0

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

于 2013-02-14T04:24:10.503 回答
0

正如像素所提到的，渲染看起来不错。您指的额外保证金是多少？

一种更简洁的方法是省略列表标签，只自行定位表格元素。或者将它们包装在一个 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>
于 2013-02-14T04:42:33.050 回答