Html UL 不留在其包含的 DIV 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1461015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
UL don't stay within their containing DIVs?
提问by tgandrews
I have a really simple set up
我有一个非常简单的设置
<div class="container">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</div>
I had assumed that all contents and the bullets of the ul would be within the div but currently this is not the case.
我曾假设 ul 的所有内容和项目符号都在 div 内，但目前情况并非如此。
The bullet points for the UL appear outside of the div and effectively disappear when overflow is hidden.
UL 的要点出现在 div 之外，并在隐藏溢出时有效消失。
To me this is somewhat broken and cross browser compatible, and I've scanned the HTML spec but couldn't find anything saying this should happen.
对我来说，这有点损坏并且跨浏览器兼容，我已经扫描了 HTML 规范，但找不到任何说明应该发生这种情况的信息。
Is there a CSS fix for it or a possible layout fix?
是否有针对它的 CSS 修复或可能的布局修复？
Thanks in advance.
提前致谢。
回答by Garrett
You'll want to use list-style-position:
你会想要使用list-style-position：
ul {
list-style-position: inside;
}
回答by Bryan Rehbein
You usually lose the list decorations to the overflow of a div when your UL/OL and LI don't have enough padding, or you are floating elements or display: inline.
当您的 UL/OL 和 LI 没有足够的填充，或者您是浮动元素或 display: inline 时，您通常会因 div 溢出而丢失列表装饰。
Try adding some padding/margins to your list items (LI element).
尝试向列表项（LI 元素）添加一些填充/边距。
回答by Zoidberg
Are you floating your List items to the left or right? If so then the following will solve your problem.
您是向左还是向右浮动列表项？如果是这样，那么以下内容将解决您的问题。
<div class="container">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<div style="clear:both;"></div>
</div>
回答by marcgg
回答by Declan McKenna
list-style-position: insideworks great unless your bullet points will need multiple lines on small screens as your text will align with the bullet point rather than where the text begins.
list-style-position: inside除非您的项目符号在小屏幕上需要多行，否则效果很好，因为您的文本将与项目符号对齐而不是文本开始的位置。
Keeping the default text-align: outside, allowing for a small margin and aligning the text to the left to override any centered containers gets around the bullet point alignment problem.
保持默认值text-align: outside，允许一个小的边距并将文本向左对齐以覆盖任何居中的容器，从而解决了项目符号点对齐问题。
ul, ol {
margin-left: 0.75em;
text-align: left;
}
