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

Why do my list item bullets overlap floating elements

提问by Kamiel Wanrooij

I have an (XHTML Strict) page where I float an image alongside regular paragraphs of text. All goes well, except when a list is used instead of paragraphs. The bullets of the list overlap the floated image.

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

Changing the margin of the list or the list items does not help. The margin is calculated from the left of the page, but the float pushes the list items to the right insidethe liitself. So the margin only helps if I make it wider than the image.

更改列表或列表项的边距无济于事。边距是从页面左侧计算的，但浮动会将列表项推到其自身内部的右侧li。因此，只有当我使它比图像更宽时，边距才有帮助。

Floating the list next to the image also works, but I don't know when the list is next to a float. I don't want to float every list in my content just to fix this. Also, floating left messes up the layout when an image is floated to the rightinstead of left of the list.

浮动图像旁边的列表也有效，但我不知道列表何时在浮动旁边。我不想为了解决这个问题而在我的内容中浮动每个列表。此外，当图像浮动到列表的右侧而不是左侧时，向左浮动会弄乱布局。

Setting li { list-style-position: inside }does move the bullets along with the content, but it also causes lines that wrap to start aligned with the bullet, instead of aligned with the line above.

Settingli { list-style-position: inside }确实会随着内容移动项目符号，但它也会导致环绕的行开始与项目符号对齐，而不是与上面的行对齐。

The problem is obviously caused by the bullet being rendered outside the box, the float pushing the contents of the box to the right (not the box itself). This is how IE and FF handle the situation, and as far as I know, not wrong according to the spec. The question is, how can I prevent it?

问题显然是由子弹在框外渲染引起的，浮动将框的内容向右推（而不是框本身）。这就是 IE 和 FF 处理这种情况的方式，据我所知，根据规范没有错。问题是，我该如何预防？

回答by Kamiel Wanrooij

I have found a solution to this problem. Applying an ul { overflow: hidden; }to the ulensures that the box itself is pushed aside by the float, instead of the contents of the box.

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

Only IE6 needs an ul { zoom: 1; }in our conditional comments to make sure the ulhas layout.

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

回答by Blazemonger

Adding an improvement to Glen E. Ivey's solution:

对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/

http://jsfiddle.net/mblase75/TJELt/

I prefer this technique, since it works when the list needs to flow around the floating image, while the overflow: hiddentechnique will not. However, it's also necessary to add padding-right: 1emto the lito keep them from overflowing their container.

我更喜欢这种技术，因为当列表需要围绕浮动图像流动时它可以工作，而该overflow: hidden技术则不会。但是，还需要添加padding-right: 1em到 中li以防止它们溢出容器。

回答by martinedwards

This is where the "display" property comes into its own. Set the CSS below to make the list work alongside the floated content.

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

display: table; works alongside floated content (filling the gap) but without hiding content behind it. Much like a table does :-)

显示：表；与浮动内容一起工作（填补空白）但不隐藏其背后的内容。就像桌子一样:-)

.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>

EDIT: Remember to add a class to isolate which lists you wish to do this for. E.g. "ul.in-content" or more generally ".content ul"

编辑：请记住添加一个类来隔离您希望为其执行此操作的列表。例如“ul.in-content”或更一般的“.content ul”

回答by annakata

Try list-style-position: insideto change the layout of the bullets.

尝试list-style-position: inside更改项目符号的布局。

回答by Glen E. Ivey

At http://archivist.incutio.com/viewlist/css-discuss/106382I found a suggestion that worked for me: style the 'li' elements with:

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

position: relative;
left: 1em;

Where you replace "1em" with the width of the left padding/margin that your list items would have if the float weren't present. This works great in my application, even handling the case where the bottom of the float occurs in the middle of the lists--the bullets shift back over to the (local) left margin just right.

如果浮动不存在，您将“1em”替换为列表项将具有的左侧填充/边距的宽度。这在我的应用程序中效果很好，甚至处理浮动底部出现在列表中间的情况——项目符号移回（本地）左边距恰到好处。

回答by Maehler

By adding overflow: auto;to your ulworks for me at least.

至少为我添加overflow: auto;到你的ul作品中。

Update

更新

I've updated my jsfiddleto visualize what's going on. When having the ulbeside the floating img, the content of the ulwill be pushed by the float, but not the actual container. By adding overflow: autothe whole ul-box will be pushed by the float instead of only the content.

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

回答by Serge Stroobandt

Why overflow: hiddenworks

为什么overflow: hidden有效

The solution is as easy as:

解决方案很简单：

ul {overflow: hidden;}

A block box with overflow:other than visibleestablishes a new block formatting contextfor its contents. W3C recommendation: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

一个块框overflow:除了为其内容visible建立一个新的块格式上下文。W3C 推荐：http: //www.w3.org/TR/CSS2/visuren.html#block-formatting

Example:

例子：

The buttons on my website, which are <li>in disguise, are made like this. Make the viewport (window) of your browser smaller to see the indentingin action.

上的按钮我的网站它们，<li>伪装，都犯了这样的。缩小浏览器的视口（窗口）以查看缩进的效果。

Related answers:

相关回答：

• https://stackoverflow.com/a/710264/2192488
• https://stackoverflow.com/a/16041390/2192488

• https://stackoverflow.com/a/710264/2192488
• https://stackoverflow.com/a/16041390/2192488

Article with examples:

文章举例：

• Overflow – a secret benefit

• 溢出 - 一个秘密的好处

回答by Chris Lercher

You could assign position: relative; left: 10px;to the li. (You may additionally want to give it a margin-right: 10px;, otherwise it might become too wide on the right side.)

您可以分配position: relative; left: 10px;给li. （您可能还想给它一个margin-right: 10px;，否则它可能会在右侧变得太宽。）

Or, if you want to use floatfor the ul-- as suggested by others -- you can probably stop the rest from floating right of the ul by using clear: lefton the element that follows the ul.

或者，如果您想使用floatfor ul- 正如其他人所建议的那样 - 您可以通过在 ul 后面clear: left的元素上使用来阻止其余部分浮动在 ul 的右侧。

回答by LifeIsShort

I am using this to solve this problem:

我正在使用它来解决这个问题：

ul {
   display: table;
}

回答by zzzzBov

Disclaimer

免责声明

Lists next to floated elements cause issues. In my opinion, the best way to prevent these sorts of floating issues is to avoid floating images that intersect with content. It'll also help when you have to support responsive design.

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

A simple design of having centered images between paragraphs will look very attractive and be much easier to support than trying to get too fancy. It's also one step away from a <figure>.

在段落之间放置居中图像的简单设计看起来非常有吸引力，并且比试图变得太花哨更容易支持。它也离 a 一步之遥<figure>。

But I really want floated images!

但我真的想要浮动图像！

Ok, so if you're crazypersistent enough to continue down this path, there are a couple techniques that can be used.

好的，所以如果你足够疯狂地坚持沿着这条路继续走下去，那么可以使用一些技巧。

The simplest is to make the list use overflow: hiddenor overflow: scrollso that the list is essentially shrink wrapped which pulls the padding back to where it's useful:

最简单的方法是使用列表，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>

This technique has a few problems though. If the list gets long, it doesn't actually wrap around the image, which pretty much defeats the entire purpose of using floaton the image.

但是这种技术有一些问题。如果列表变长，它实际上并没有环绕图像，这几乎违背了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>

But I really want wrapping lists!

但我真的想要包装清单！

Ok, so if you're even craziermore persistent and you absolutely mustcontinue down this path, there's another technique that can be used to wrap the list items and maintain bullets.

好的，所以如果你更疯狂更坚持并且你绝对必须继续沿着这条路走下去，还有另一种技术可用于包装列表项和维护项目符号。

Instead of padding the <ul>and trying to get it to behave nicely with bullets (which it never seems to want to do), take those bullets away from the <ul>and give them to the <li>s. Bullets are dangerous, and the <ul>just isn't responsible enough to handle them properly.

与其填充 the<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>

This wrapping behavior can do weird things to complex content, so I don't recommend adding it by default. It's much easier to set it up as something that can be opted into rather than something that has to be overridden.

这种包装行为可以对复杂的内容做一些奇怪的事情，所以我不建议默认添加它。将其设置为可以选择的内容而不是必须覆盖的内容要容易得多。