UL不会留在他们的DIV内吗？

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;
}

欢迎来到CSS的乐趣.在这里,给自己买一个杯子 - http://www.zazzle.co.uk/css_is_awesome_mug-168716435071981928 (10认同)
它有效,但可怕的副作用是,当<li>占用多行时(用户缩小浏览器宽度),新行最终位于点(<ol>的数字)下方,而不是保持与前一行对齐. (7认同)
对于换行问题，可以将 li 的 left-margin 设置为 1em，而不是将 ul 的 list-style-position 改为 inside (2认同)

Answer 2

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

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

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

Answer 3

当你的 UL/OL 和 LI 没有足够的填充，或者你是浮动元素或 display: inline 时，你通常会因为 div 的溢出而丢失列表装饰。

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