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

Question

我有一个(XHTML严格)页面,我将图像与常规段落的文本一起浮动.一切顺利,除非使用列表而不是段落.列表的项目符号与浮动图像重叠.

更改列表或列表项的边距没有帮助.边距是从页面左侧计算的,但浮动将列表项推送到自身内部的右侧li.因此,如果我将其宽于图像,则边距仅有帮助.

浮动图像旁边的列表也可以,但我不知道列表何时在浮点旁边.我不想在我的内容中浮动每个列表只是为了解决这个问题.此外,当图像浮动到列表的右侧而不是左侧时,浮动左侧会混淆布局.

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

问题显然是由于子弹在盒子外面呈现,浮子将盒子的内容推到右边(而不是盒子本身).这就是IE和FF如何处理这种情况,据我所知,根据规范没有错.问题是,我该如何预防呢？

Answer 1

我找到了解决这个问题的方法.施加ul { overflow: hidden; }到ul该盒子本身是由浮子推开保证,而不是框的内容.

只有IE6需要ul { zoom: 1; }在我们的条件注释中确保ul有布局.

Answer 2

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

Answer 3

这就是"显示"属性自成一体的地方.设置下面的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"

Answer 4

尝试list-style-position:inside来改变项目符号的布局.

Answer 5

在http://archivist.incutio.com/viewlist/css-discuss/106382,我找到了一个对我有用的建议:用'li'元素设置样式:

position: relative;
left: 1em;

将"1em"替换为左侧填充/边距的宽度,如果浮动不存在,则列表项将具有该宽度.这在我的应用程序中非常有用,甚至可以处理浮动的底部出现在列表中间的情况 - 子弹向右移回到(本地)左边距.

Answer 6

通过至少为我overflow: auto;的ul作品添加.

更新

我已经更新了我的jsfiddle以可视化正在发生的事情.当ul浮动旁边时,浮动将推动img内容ul,而不是实际容器.通过添加overflow: auto整个ul-box将被浮动而不仅仅是内容推送.

Answer 7

解决方案很简单:

ul {overflow: hidden;}

其中A块框overflow: hidden以外overflow: 建立一个新的块格式化上下文的内容.W3C建议:http://www.w3.org/TR/CSS2/visuren.html#block-formatting

例:

我的网站上的按钮是visible伪装的,就像这样.使浏览器的视口(窗口)变小,以查看缩进操作.

相关答案:

• /sf/answers/49718511/
• /sf/answers/1122897331/

文章举例:

• 溢出 - 一个秘密的好处

Answer 8

你可以分配position: relative; left: 10px;给li.(你可能还想给它一个margin-right: 10px;,否则它可能在右侧变得太宽.)

或者,如果你想使用float的ul-其他人的建议-你也许可以从使用浮动UL权停止休息clear: left下面的UL的元素.

Answer 9

我用它来解决这个问题:

ul {
   display: table;
}

Answer 10

放弃

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

在段落之间设置居中图像的简单设计看起来非常有吸引力,并且比试图过于花哨更容易支持.它距离一个还有一步之遥<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>s.子弹是危险的,<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>

这种包装行为可能会对复杂内容产生奇怪的影响,因此我建议不要在默认情况下添加它.将它设置为可以选择的内容而不是必须被覆盖的内容要容易得多.