我找到了解决这个问题的办法。应用一个 ul { overflow: hidden; } 到 ul 确保框本身被浮动推到一边,而不是框中的内容。

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

向添加改进 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 防止容器溢出。

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

ul
{
    display: table;
}

显示:表格;与浮动内容一起工作(填补空白),但不隐藏其中的内容。就像桌子一样:—)

编辑:记住要添加一个类来隔离要为哪个列表执行此操作。例如,“ul.in content”或更一般的“content ul”

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

AT http://archivist.incutio.com/viewlist/css-discuss/106382 我发现了一个对我有用的建议:“li”元素的样式有:

position: relative;
left: 1em;

如果不存在浮动,则用列表项的左填充/边距宽度替换“1em”。这在我的应用程序中非常有效,甚至处理了浮动底部出现在列表中间的情况——项目符号移回(本地)左边距刚好在右边。

通过添加 overflow: auto; 对你 ul 至少对我有用。

更新

我已经更新了 my jsfiddle 想象发生了什么。当有 UL 在漂浮物旁边 img ,的内容 UL 将由浮动推动,但不是实际容器。通过添加 overflow: auto 整体 UL -框将被浮动推送,而不是仅推送内容。

解决方案简单如下:

ul {overflow: hidden;}

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

例子:

钮扣上 my website 这些都是 <li> 伪装成这样。将浏览器的视区(窗口)缩小到 see the indenting in action .

相关答案:

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

文章举例:

• Overflow – a secret benefit

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

或者,如果你想使用 float 对于 ul --正如其他人建议的那样——您可以使用 clear: left 在ul后面的元素上。

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

ul {
   display: table;
}

免责声明

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

一个简单的设计,在段落之间有一个居中的图像将看起来非常有吸引力,并且比试图变得过于花哨更容易支持。离A还有一步远 <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{
浮动:左;
}
.包装清单{
溢出:隐藏;
左侧填充: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 & GT; 把它们给 <li> 美国的子弹很危险, <UL & GT; 只是没有足够的责任来妥善处理它们。

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>洛伦</li>
<li>ipsum</li>
<li>多尔</li>
<li>坐下</li>
<li>参数</li>
<li>洛伦</li>
<li>ipsum</li>
<li>多尔</li>
<li>坐下</li>
<li>参数</li>
<li>洛伦</li>
<li>ipsum</li>
<li>多尔</li>
<li>坐下</li>
<li>参数</li>
&L/UL & GT;

这种包装行为可以对复杂的内容做一些奇怪的事情,所以我不建议在默认情况下添加它。将其设置为可选择的内容要比必须重写的内容容易得多。

在您的ul标签上尝试以下操作。这应该注意覆盖你图像的子弹,你不必因为 list-position: inside .

overflow: hidden; 
padding-left: 2em; 

我自己也在挣扎。我能做到的最好是:

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

文本实际上不是缩进的,但项目符号会显示出来。

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

好的,然后把它分成两个嵌套在一起的分区

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浮动:左;背景:蓝色;

在几个项目中讨论了这个有趣的问题,并调查了它发生的原因之后,我最终相信我发现了这两个问题:a 工作和“响应” 解决方案。

以下是魔术,实况例子: 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 作为图像的内嵌样式。这是我应得的 site .

试试这个:

li{
    margin-left:5px;
}

如果你想让它们向左移动,只需输入一个-px值。

或者你可以这样做:

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

然后把所有的造型从李中去掉

这个怎么样?

ul{float:left; clear:right}

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

左边距:自动将使元素本身右对齐。 设置所需元素的高度和宽度-在“我的”中,它是一个位于内部分区的背景图像

你也可以尝试浮动 ul 在左侧,并定义适当的 width 因为它,所以它漂浮在图像旁边。

有点像 this jsfiddle ?

我把它固定了

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

width: auto; overflow: hidden;

添加 display:table; 到 ul :

ul{display:table;}