这个小提琴显示了基本问题： http://jsfiddle.net/boldewyn/Qvfgv/
有一个浮动元素，旁边是主流中的列表。列表项扩展到浮动元素的空间。
解决方法是在overflow: hidden上使用<ul>。但随后列表不再在div周围“流动”，而是始终保持在右侧，这对于浮动元素下方的所有空白区域都是不希望的。
列表应该浮动在浮动块周围，列表项应该保持在浮动块的区域之外。另外，单个<li>元素可以向右推（例如，通过overflow: hidden）。
没有背景图片或JavaScript的纯CSS解决方案。这是一个打印预览页面，必须另外为没有JavaScript和IE7的用户量身定制。
列表项目符号应在左侧缩进，就像浏览器的默认值一样。这意味着，浮动元素旁边的列表项应该获得额外的空间，以便将子弹放入其中。
使用背景图片我可以为各个列表项填充并设置。但这还不够可靠，因为要打印页面的意图。
我不知道浮动元素的确切宽度或高度。如果我这样做，我可以使用li { margin-left: "floated-element's width" + 20px; }解决问题。
我使用text-indent，list-style-position等组合进行了一些实验，但未能找到有用的解决方案。
很可能，没有针对此的CSS解决方案。在告诉客户这是不可能的之前，这个问题实际上是我的最后一招。
答案 0 :(得分：2)
答案 1 :(得分：0)
列表项目子弹通常似乎比他们应该更左侧。答案很简单：向<li>添加一些左边距或向<ul>添加左边距。这将把一切都转移到右边。
我通常会在使用CSS重置的网站中看到此行为，因为ul,li {margin:0;padding:0}会给出您所看到的行为。事实上，你的小提琴就是这样做的：
ul {
margin: 0;
padding: 0 0 0 20px;
}
li {
margin: 0;
padding: 0;
}
所以是的，你实际上是将文本与左边缘对齐，而不是通过边缘的子弹（这是我猜的某种CSS怪癖）。在你的情况下，你在ul上有一个20px左边的填充，但这似乎不够，试着把它放在li上或使用边距。
答案 2 :(得分：0)
position: relative;是我找到的最佳解决方案，只需确保在右侧添加填充或边距以补偿偏移。这适用于设置为list-style-position或inside的{{1}}。您只需要相应地调整偏移量。
outside答案 3 :(得分：0)
我同意TomWardrop的观点，我发现最好的解决方案是确保嵌套列表缩进在浮动元素旁边是否一致是重置填充并使用左设置的相对定位。
ul {
position: relative;
padding-left:0;
margin-left:0;
left: 1em;
}
更新
如果只想在嵌套列表中使用插入，并保持第一级与段落内联。对于ul css声明，将左侧设置为0，然后：
ul ul {
left:1em;
}