Question

我有一个非常简单的设置

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

我曾假设ul的所有内容和子弹都在div内，但目前情况并非如此。

UL的要点出现在div之外，并且在隐藏溢出时会有效消失。

对我而言，这有点破碎，并且跨浏览器兼容，我已经扫描了HTML规范，但找不到任何说这应该发生的事情。

是否有针对它的CSS修复或可能的布局修复？

提前致谢。

Answer 1

您需要使用list-style-position：

ul {
   list-style-position: inside;
}

Answer 2

当您的UL / OL和LI没有足够的填充，或者您是浮动元素或显示：内联时，您通常会将列表装饰丢失到div的溢出。

尝试在列表项（LI元素）中添加一些填充/边距。

Answer 3

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

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

Answer 4

这种问题通常可以使用好reset.css来修复，并重写所有信息，例如list-style等。

Answer 5

list-style-position: inside非常有用，除非您的项目符号要在小屏幕上显示多行，因为您的文本将与项目符号对齐，而不是文本的开头。

保留默认的text-align: outside，留出少量空白，并将文本向左对齐以覆盖所有居中的容器，从而避免了项目符号点对齐问题。

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

Answer 6

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