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

更改列表或列表项的边距无济于事。页边距是从页面的左侧计算得出的，但浮动框将列表项推到其自身内部的右侧li。因此，仅当我将其设置得比图像宽时，边距才有用。

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

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

问题显然是由子弹在盒子外面渲染引起的，浮子将盒子的内容推到右边（不是盒子本身）。IE和FF就是这样处理情况的，据我所知，按照规范，这没有错。问题是，如何预防呢？

我已经找到解决此问题的方法。施加ul { overflow: hidden; }到ul该盒子本身是由浮子推开保证，而不是框的内容。

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

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

这是“ 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”

尝试list-style-position：内部更改项目符号的布局。

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

position: relative;
left: 1em;

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

为什么overflow: hidden工作

解决方案很简单：

ul {overflow: hidden;}

带有overflow:除以外的块框为其内容visible 建立新的块格式化上下文。W3C建议：http : //www.w3.org/TR/CSS2/visuren.html#block-formatting

例

上的按钮我的网站它们，<li>伪装，都犯了这样的。让你的浏览器更小，视口（窗口）看到缩进在行动。

相关答案

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

带有示例的文章

• 溢出–一项秘密好处

至少为我增加overflow: auto;了您的ul作品。

更新资料

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

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

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

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

ul {
   display: table;
}

免责声明

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

在段落之间居中放置图像的简单设计看起来非常吸引人，并且比试图太花哨更容易支持。距距离也仅有一步之遥<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>

这种包装行为会使复杂的内容变得奇怪，因此我不建议默认添加它。将其设置为可以选择加入的内容而不是必须覆盖的内容要容易得多。

在您的UL标签上尝试以下操作。这应该照顾到覆盖图像的项目符号，并且您不必弄乱由引起的左对齐list-position: inside。

overflow: hidden; 
padding-left: 2em; 

自己为此奋斗。我管理的最好的事情如下：

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

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

编辑以根据OP的评论进行更新

好，然后将其分解为2个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; 背景：蓝色；}

在几个项目中解决了这个有趣的问题，并研究了发生原因之后，我终于相信我找到了两者：一个可行且“响应式”的解决方案。

这是魔术，现场示例：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 */
}

在LMS内部工作而无需访问文档负责人，发现将其margin-right: 20px作为图像的内联样式更容易使用。这归功于我这个网站。

试试这个：

li{
    margin-left:5px;
}

如果您想让它们左移，只需输入-## px值即可。

或者您可以这样做：

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

然后从li删除所有样式

这个怎么样？

ul{float:left; clear:right}

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

margin-left：自动将使元素本身右对齐。设置所需元素的高度和宽度-在我这是div里面的背景图像

您也可以尝试将浮动ul到左侧，并width为其定义一个合适的位置，以使其浮动在图像旁边。

像这样的jsfiddle？

我用

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

width: auto; overflow: hidden;

添加display:table; 到ul：

ul{display:table;}