html - UL の弾丸が、それを含む DIV 内にとどまらないのはなぜですか?

Question

私は本当に簡単なセットアップをしています：

<div class="container">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
</div>

UL のすべてのコンテンツと箇条書きが div 内にあると想定していましたが、現在はそうではありません。

UL の箇条書きは div の外側に表示され、オーバーフローが非表示になると効果的に消えます。

私にとって、これはいくぶん壊れており、ブラウザ間の互換性があり、HTML 仕様をスキャンしましたが、これが起こるべきだと言っているものは見つかりませんでした。

CSS の修正またはその他のレイアウトの修正はありますか?

score 91 · Accepted Answer

91

あなたが使用したいでしょうlist-style-position：

ul {
   list-style-position: inside;
}

于 2009-09-22T16:07:11.840 に答える

score 4 · Accepted Answer

通常、UL/OL と LI に十分なパディングがない場合、またはフローティング要素または display: inline の場合、リストの装飾が div のオーバーフローで失われます。

リスト項目 (LI 要素) にパディング/マージンを追加してみてください。

score 1 · Accepted Answer

リスト項目を左または右にフローティングしていますか? もしそうなら、以下はあなたの問題を解決します。

<div class="container">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
  <div style="clear:both;"></div>
</div>

score -1 · Accepted Answer

この種の問題は通常、適切なreset.cssを使用して修正し、リストスタイルなどのすべての情報を書き直すことができます。

score -2 · Accepted Answer

リストで float プロパティを使用する場合は、ページ上のすべてのリスト要素ではなく、選択したリストのみにスタイルを追加するようにしてください。

7 に答える 7