Html UL don'；你不能呆在他们的控制舱里吗？

我有一个非常简单的设置

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

项目一
项目二

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

UL的项目符号出现在div之外，并且在溢出被隐藏时有效地消失

对我来说，这是有点破碎和跨浏览器兼容，我已经扫描了HTML规范，但找不到任何东西说这应该发生

是否有CSS修复程序或可能的布局修复程序

---

提前感谢。

这类问题通常可以使用良好的解决方案，并重新写入所有信息，如列表样式等。

您需要使用

列表样式位置

：

ul {
   list-style-position: inside;
}

---

您是否将列表项向左或向右浮动？如果是这样的话，下面将解决您的问题

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

项目一
项目二

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

---

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

列表样式位置：inside

非常有效，除非您的项目符号需要在小屏幕上多行，因为您的文本将与项目符号对齐，而不是与文本开始的位置对齐

保持默认的

文本对齐：外部

，允许一个小的边距，并将文本向左对齐以覆盖任何居中的容器，可以解决项目符号对齐问题

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

---

这会删除项目符号，不确定这是否是他想要的，或者他是否希望它们出现在容器中。通过删除所有内容，他可以准确地设置他想要的内容。如果你的div与你的ul和li的高度不一样，你会使用这个技巧。在ul或li元素上使用浮点数时，您需要使用此技巧。您是对的，但问题很模糊，所以我尽了最大努力。这在5年后派上了用场，所以这是第一次投票：）这可能是让子弹进入div的更好方法之一，然而，你必须记住，IE与标准兼容浏览器（Firefox、Safari等）的区别并不是一成不变的。它解决了这个问题，但为什么还需要它呢？当然，你不应该打破一个div？欢迎来到CSS的乐趣。在这里，给自己买一个杯子——它可以工作，但可怕的副作用是，当

占据多行（用户缩小浏览器宽度）时，新行将位于点（数字）下方，而不是与前一行对齐。对于换行问题，您可以将

li

的

left margin

设置为

1em

，而不是将

ul

的

列表样式位置更改为
内部
这通常是最好的操作步骤。它还将保持列表项的缩进，这将使多行文本项看起来更整洁。