1

テーブルが LI 要素内にある場合、テーブルの非常に奇妙なマージン動作を見つけました。LI 内では、TABLE の上部に追加のマージンがあり、「マージン」または「パディング」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 で次のようにレンダリングされます。

スクリーンショット #1

私が期待する：

スクリーンショット #2

なぜこのマージンが発生するのか本当にわかりませんか？LI自体にはパディングがなく、TABLEにはマージンがありませんが、一緒に...

アップデート。このマージンは、Google Chrome (24.0.1312.68) でのみ表示されます。Mozilla Firefox (18.0.2) では余白がなく、ページは期待どおりに表示されます (スクリーンショット #2)。

4

3 に答える 3

1

liタグ内にフローティング div を使用してフォームを格納する方が良い実装だと思いますが、HTML セットアップで発生しているスペースの問題を解決するには、display: inline-tableスタイルをtableタグに追加します。(以下にコードをコピーします。CSS をタグ内でインライン化するのではなく、ヘッダーに移動したことに注意してください。)

これに関する注意: inline-table 属性は IE 7 以下ではまったくサポートされておらず、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 に答える