为什么我的列表项目项重叠浮动元素

我有一个(XHTML 严格)页面，其中我浮动一个图像旁边的常规文本段落。除了使用列表而不是段落之外，一切都很顺利。列表的项目符号与浮动图像重叠。

更改列表或列表项的边距无济于事。页边距是从页面的左边计算的，但是 float 将列表项推到右边的 在里面和 li本身。所以边距只有比图像宽才有帮助。

浮动图像旁边的列表也可以工作，但是我不知道列表什么时候在浮动图像旁边。我不想为了解决这个问题而让内容中的每个列表浮动。此外，当一个图像被浮动为 右边而不是列表的左侧时，向左浮动会扰乱布局。

设置 li { list-style-position: inside }确实会将项目符号和内容一起移动，但是它也会导致换行开始时与项目符号对齐，而不是与上面的行对齐。

这个问题显然是由于子弹被渲染到盒子外面，浮动将盒子的内容推向右边(而不是盒子本身)。这是 IE 和 FF 处理这种情况的方式，据我所知，根据规范没有错。问题是，我怎样才能阻止它？

98058 次浏览
小开

尝试 List-style-position: inside更改子弹的布局。

小开
最佳答案

我已经找到了解决这个问题的办法。对 ul应用 ul { overflow: hidden; }可以确保盒子本身被浮动推到一边，而不是盒子的内容。

只有 IE6需要一个 ul { zoom: 1; }在我们的条件注释，以确保 ul有布局。

小开

在 http://archivist.incutio.com/viewlist/css-discuss/106382，我发现了一个对我有用的建议: 用以下方式来设计“ li”元素:

position: relative;
left: 1em;

用左边距/边距的宽度替换“1em”，如果浮点数不存在的话，那么列表项的宽度就是左边距/边距的宽度。这在我的应用程序中非常有效，甚至可以处理浮点数的底部出现在列表中间的情况——项目符号转移回(本地)左边距刚好正确的位置。

小开

根据 OP 的评论编辑更新

好的，然后把它分成两个嵌套在一起的 div

ul  {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; back: blue; }

小开

试试这个:

li{
margin-left:5px;
}

如果您想让它们向左，只需输入一个-# # px 值。

小开

或者你可以这样做:

 #content ul {
background:none repeat scroll 0 0 #AACCDD;
float:left;
margin-right:10px;
padding:10px;

然后把所有的造型都去掉

小开

您可以将 position: relative; left: 10px;分配给 li。(你可能还需要给它一个 margin-right: 10px;，否则它的右侧可能会变得太宽。)

或者，如果您希望对 ul使用 float——正如其他人所建议的那样——您可以通过在 ul 后面的元素上使用 clear: left来停止 ul 右边的其余部分。

小开 
width: 300px;
height: 30px;
margin-left: auto;
right: 10px;

Auto 将导致元素本身向右对齐。 设置你想要的元素的高度和宽度-在我的背景图片中，它是一个 div 内部的背景图片

小开

我自己也很纠结，最好的办法是这样:

ul {
list-style-position: inside;
padding-left: 1em;
text-indent: -1em;
}

文本实际上没有缩进，但显示了项目符号。

小开

这个怎么样？

ul{float:left; clear:right}
小开

在 LMS 内部工作，无需访问文档头部，使用 margin-right: 20px作为图像的内联样式更容易。这是我欠这个 工地的。

小开

在 UL 标签上尝试下面的操作。这应该照顾子弹覆盖你的形象，你不必搞砸你的左对齐造成的 list-position: inside。

overflow: hidden;
padding-left: 2em;
小开

您还可以尝试将 ul浮动到左侧，并为其定义一个适当的 width，以便它浮动到图像旁边。

有点像 这把小提琴？

小开

把 overflow: auto;加到你的 ul至少对我有用。

更新

我已经更新了 我的小提琴来观察情况。当把 ul放在浮动的 img旁边时，ul的内容将由浮动来推动，而不是由实际的容器来推动。通过添加 overflow: auto，整个 ul框将由浮动推动，而不仅仅是内容。

小开

这就是“ display”属性发挥作用的地方。设置下面的 CSS，使列表与浮动内容一起工作。

Display: table; 与浮动内容一起工作(填补空白) ，但不隐藏内容。就像桌子一样: -)

.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”或更一般地说。满意

小开

为 Glen E. Ivey 的解决方案增加一项改进:

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以防止它们的容器溢出。

小开

我用这个来解决这个问题:

ul {
display: table;
}
小开

为什么 overflow: hidden会起作用

解决办法很简单:

ul {overflow: hidden;}

一个盒子，里面的内容除了 visible以外，还有 overflow: W3C推荐标准

例子

我的网站上的按钮，这是 <li>的伪装，是这样做的。使浏览器的视口(窗口)小于 请参见 < strong > 缩进 。

My website as an example

相关答案

文章附例

小开

我把它修好了

div.class-name ul {
clear: both;
}
小开

在几个项目中解决了这个有趣的问题，并调查了其发生的原因之后，我终于相信我找到了两者: 一个 工作和“回应”解决方案。

这里是魔术表演，实例: 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 */
}
小开

免责声明

浮动元素旁边的列表会导致问题。在我看来，防止这类浮动问题的最好方法是避免与内容相交的浮动图像。当您必须支持响应式设计时，它也会有所帮助。

在段落之间设置居中图像的简单设计看起来非常有吸引力，而且支持起来要比设计得太花哨容易得多。它离 <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>和给他们的 <li>。子弹是危险的，而且 <ul>没有足够的责任来正确地处理它们。

img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
<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>

这种包装行为会对复杂内容造成奇怪的影响，所以我不推荐在默认情况下添加它。把它设置成可以选择的东西比设置成必须被覆盖的东西要容易得多。

小开 
width: auto; overflow: hidden;
小开

将 display:table;加入到 ul:

ul{display:table;}

提交答案