我有一个（XHTML Strict）页面，我将图像与常规段落文本一起浮动。一切顺利，除非使用列表而不是段落。列表的项目符号与浮动图像重叠。
更改列表或列表项的边距没有帮助。边距是从页面左侧计算的，但浮动将列表项推送到里面 li本身。因此，如果我将其宽于图像，则边距仅有帮助。
浮动图像旁边的列表也可以，但我不知道列表何时在浮点旁边。我不想在我的内容中浮动每个列表只是为了解决这个问题。此外，当图像浮动到右侧而不是列表左侧时，浮动左侧会混淆布局。
设置li { list-style-position: inside }确实会将项目符号与内容一起移动，但它也会导致换行的行开始与项目符号对齐，而不是与上面的行对齐。
问题显然是由于子弹在盒子外面呈现，浮子将盒子的内容推到右边（而不是盒子本身）。这就是IE和FF如何处理这种情况，据我所知，根据规范没有错。问题是，我该如何预防？
答案 0 :(得分：269)
我找到了解决这个问题的方法。将ul { overflow: hidden; }应用于ul可确保框本身被浮动而不是框的内容推到一边。
只有IE6在条件评论中需要ul { zoom: 1; }才能确保ul具有布局。
答案 1 :(得分：64)
向Glen E. Ivey's solution添加改进：
ul {
list-style: outside disc;
margin-left: 1em;
}
ul li {
position: relative;
left: 1em;
padding-right: 1em;
}
http://jsfiddle.net/mblase75/TJELt/
我更喜欢这种技术，因为当列表需要围绕浮动图像流动时它会起作用，而overflow: hidden技术则不会。但是，还需要将padding-right: 1em添加到li以防止它们溢出其容器。
答案 2 :(得分：35)
这就是“display”属性自成一体的地方。设置下面的CSS以使列表与浮动内容一起工作。
显示：表;与浮动内容一起工作（填补空白）但不隐藏其背后的内容。就像桌子一样： - ）
.img {
float: left;
}
.table {
display: table;
}<img class="img" src="https://via.placeholder.com/350x350" alt="">
<ul>
<li>Test content</li>
<li>Test content</li>
<li>Test content</li>
</ul>
<ul class="table">
<li>Test content</li>
<li>Test content</li>
<li>Test content</li>
</ul>
编辑：请记住添加一个类来隔离您希望执行此操作的列表。例如。 “ul.in-content”或更一般地说是“.content ul”
答案 3 :(得分：28)
尝试list-style-position: inside更改项目符号的布局。
答案 4 :(得分：17)
在http://archivist.incutio.com/viewlist/css-discuss/106382我找到了一个对我有用的建议：用'li'元素设置样式：
position: relative;
left: 1em;
如果浮动不存在，将“1em”替换为列表项将具有的左边距/边距的宽度。这在我的应用程序中非常有用，甚至可以处理浮动的底部出现在列表中间的情况 - 子弹向右移回到（本地）左边距。
答案 5 :(得分：17)
至少为我的overflow: auto;工作添加ul。
<强>更新
我已更新my jsfiddle以查看正在发生的事情。在浮动ul旁边img时，ul的内容将由浮动推送，而不是实际容器。通过添加overflow: auto，整个ul - 框将被浮动而非仅内容推送。
答案 6 :(得分：16)
overflow: hidden有效解决方案非常简单：
ul {overflow: hidden;}
除了overflow: 之外的visible的块框为其内容建立了新的块格式化上下文。 W3C建议：http://www.w3.org/TR/CSS2/visuren.html#block-formatting
示例：
my website上的按钮，伪装成<li>，就是这样做的。将浏览器的视口（窗口）缩小到see the indenting in action。
相关答案：
文章与示例：
答案 7 :(得分：13)
您可以将position: relative; left: 10px;分配给li。 （你可能还想给它一个margin-right: 10px;，否则它可能会在右侧变得太宽。）
或者，如果您想float使用ul - 正如其他人所建议的那样 - 您可以通过使用clear: left来阻止其余部分浮动到ul的右侧ul之后的元素。
答案 8 :(得分：7)
我用它来解决这个问题：
ul {
display: table;
}
答案 9 :(得分：6)
浮动元素旁边的列表会导致问题。在我看来，防止这些浮动问题的最佳方法是避免浮动与内容相交的图像。当您必须支持响应式设计时，它也会有所帮助。
在段落之间设置居中图像的简单设计看起来非常有吸引力，并且比试图过于花哨更容易支持。距离<figure>还有一步之遥。
好的，所以如果你疯狂足够坚持继续沿着这条路走下去，可以使用几种技术。
最简单的方法是使列表使用overflow: hidden或overflow: scroll，以便列表基本上是收缩包装，将填充拉回到它有用的位置：
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
这种技术虽然存在一些问题。如果列表变长，它实际上并没有包围图像，这几乎违背了在图像上使用float的全部目的。
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
好的，所以，如果你甚至疯狂更持久，并且绝对必须继续沿着这条路走下去，那么可以使用另一种技术包装列表项并维护项目符号。
而不是填充<ul>并试图让它与子弹（它似乎从来不想做）表现得很好，而是将这些子弹从<ul>移开并将它们交给{ {1}}秒。子弹很危险，<li>只是没有足够的责任来处理它们。
<ul>img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
此包装行为可能会对复杂内容产生奇怪的影响，因此我建议您不要默认添加它。将它设置为可选择的内容而不是必须覆盖的内容要容易得多。
答案 10 :(得分：4)
在UL标签上尝试以下操作。这应该照顾覆盖你的图像的子弹，你不必弄乱由list-position: inside造成的左对齐。
overflow: hidden;
padding-left: 2em;
答案 11 :(得分：3)
我自己也很挣扎。我所管理的最好成绩如下：
ul {
list-style-position: inside;
padding-left: 1em;
text-indent: -1em;
}
文本实际上并未缩进，但子弹显示。
答案 12 :(得分：2)
在几个项目中与这个有趣的问题作斗争并调查其发生的原因后，我终于相信我找到了两个：工作和'响应'解决方案。
这是魔术，现场示例：http://jsfiddle.net/superKalo/phabbtnx/
ul {
list-style: none;
position: relative;
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
left: 35px;
}
li {
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
text-indent: -19px; /* adjust as much as needed */
}
li:before {
content: '•\00a0\00a0\00a0';
color: #000; /* bonus: you can customize the bullet color */
}
答案 13 :(得分：2)
根据OP的评论编辑更新
好吧，然后把它分成两个嵌套在一起的divul {background: blue; position:static;}
.therest {position:relative; width:100%}
.indent {float:left; }
<div class="therest">
<p>
Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit.
</p>
<hr />
<h3>Lorem</h3>
<div class="indent">
<ul>
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul>
<div>
the rest now under the UL
</div>
尝试将ul li css更改为
ul {float：left;背景：蓝色; }
答案 14 :(得分：1)
在LMS内部无需访问doc头的情况下工作，发现使用margin-right: 20px作为图像的内联样式更容易。我欠这个site。
答案 15 :(得分：0)
您也可以尝试将ul浮动到左侧，并为其定义适当的width，以使其浮动在图像旁边。
有点像this jsfiddle？
答案 16 :(得分：0)
这个怎么样？
ul{float:left; clear:right}
答案 17 :(得分：0)
width: 300px;
height: 30px;
margin-left: auto;
right: 10px;
margin-left：auto将导致元素本身右对齐。 设置所需元素的高度和宽度 - 在我的内部是div中的背景图像
答案 18 :(得分：0)
或者你可以这样做：
#content ul {
background:none repeat scroll 0 0 #AACCDD;
float:left;
margin-right:10px;
padding:10px;
然后从li
中删除所有样式答案 19 :(得分：0)
试试这个：
li{
margin-left:5px;
}
如果你想让他们离开，只需输入 - ## px值。
答案 20 :(得分：0)
我用
修复了它div.class-name ul {
clear: both;
}
答案 21 :(得分：0)
width: auto; overflow: hidden;
答案 22 :(得分：-1)
将display:table;添加到ul：
ul{display:table;}