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 4 · Accepted Answer

list-style-position: inside效果很好，除非您的项目符号在小屏幕上需要多行，因为您的文本将与项目符号对齐，而不是文本的开始位置。

保持默认值text-align: outside，允许小边距并将文本向左对齐以覆盖任何居中的容器，从而解决了项目符号点对齐问题。

ul, ol {
  margin-left: 0.75em;
  text-align: left;
}

score 1 · Accepted Answer

您是向左还是向右浮动您的列表项？如果是这样，那么以下内容将解决您的问题。

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

score 0 · Accepted Answer

在某些情况下，使用两个 div 会有所帮助。

<div class="container">
  <div style="margin: 3%">
    <ul>
      <li>Item one</li>
      <li>Item two</li>
    </ul>
  </div>
</div>

score -1 · Accepted Answer

这类问题通常可以使用良好的reset.css并重写所有信息（例如列表样式等）来解决。

score -2 · Accepted Answer

如果在列表上使用浮动属性，请确保您只添加所选列表的样式，而不是页面上的所有列表元素。

7 回答 7