为什么我的列表项目项目符号重叠浮动元素
我有一个（XHTML Strict）页面，在这个页面中，我将图像和常规段落文本一起浮动。 一切顺利，除了使用列表而不是段落。 列表的项目符号与浮动图像重叠。
更改列表或列表项的边距不起作用。 页边距是从页面左边计算的，但是浮动将列表项目推到里面 。 所以如果我把它做得比图像更宽的话，边距才有用。
浮动图片旁边的列表也可以，但是我不知道列表是在什么时候浮动的。 我不想为了解决这个问题而将我的内容中的每个列表都浮动。 另外，当图像漂浮到右侧而不是列表左侧时，左侧浮动会使布局混乱。
设置li { list-style-position: inside }确实将项目符号与内容一起移动，但是它也会导致包装的行开始与项目符号alignment，而不是与上面的行alignment。
这个问题显然是由于子弹在盒子外面被渲染引起的，浮子把盒子的内容推向右边（而不是盒子本身）。 这就是IE和FF如何处理的情况，据我所知，根据规范没有错。 问题是，我怎样才能防止呢？
我find了解决这个问题的办法。 应用一个ul { overflow: hidden; } ul { overflow: hidden; } ul确保箱子本身被浮子推到一边，而不是箱子的内容。
只有IE6需要ul { zoom: 1; } ul { zoom: 1; }在我们的条件注释，以确保ul有布局。
为Glen E. Ivey的解决scheme增加一项改进：
ul { list-style: outside disc; margin-left: 1em; } ul li { position: relative; left: 1em; padding-right: 1em; }
http://jsfiddle.net/mblase75/TJELt/
我更喜欢这种技术，因为它在列表需要在浮动图像周围stream动时起作用，而overflow: hidden技术则不行。 然而，为了防止它们溢出容器，也需要在li上添加padding-right: 1em 。
这是“显示”财产进入自己的地方。 设置下面的CSS，使列表与浮动内容一起工作。
ul { display: table; }
显示：表格; 与浮动内容一起工作（填补空白），但不隐藏内容。 很像一张桌子:-)
编辑：记得添加一个类来隔离哪些列表，你希望这样做。 例如“ul.in-content”或更一般的“.content ul”
尝试list-style-position：里面来改变项目符号的布局。
通过添加overflow: auto; 至less你的ul作品对我来说。
更新
我已经更新了我的jsfiddle来可视化发生了什么事情。 如果在浮动img旁边有ul的内容将被float浮动，但不是实际的容器。 通过添加overflow: auto ，整个ul box将被float而不是仅仅内容所推送。
在http://archivist.incutio.com/viewlist/css-discuss/106382我find了一个适合我的build议：用“;
position: relative; left: 1em;
在那里，如果浮点数不存在，用你的列表项的左边填充/边距的宽度replace“1em”。 这在我的应用程序中效果很好，甚至处理浮点数在列表中间出现的情况 – 子弹向右移动到（本地）左边距。
解决scheme如下：
ul {overflow: hidden;}
具有overflow:的块盒子不是visible ，为其内容build立一个新的块格式化上下文 。 W3Cbuild议： http : //www.w3.org/TR/CSS2/visuren.html#block-formatting
例：
我的网站上的<li>伪装的button是这样制作的。 使浏览器的视窗（窗口）更小，以查看缩进效果 。
相关答案：
文章举例：
- 溢出 – 一个秘密的好处
你可以指定position: relative; left: 10px; position: relative; left: 10px; 给li 。 （你可能另外想要给它一个margin-right: 10px;否则它可能会变得太宽右边。）
或者，如果你想使用float作为ul就像其他人所build议的那样 – 你可以通过在ul后面的元素上使用clear: left来阻止剩下的浮动。
我正在使用这个来解决这个问题：
ul { display: table; }
放弃
浮动元素旁边的列表会导致问题。 在我看来，防止这类浮动问题的最好办法是避免与内容相交的浮动图像。 当你必须支持响应式devise时，它也会有所帮助。
在段落之间居中显示图像的简单devise看起来非常有吸引力，并且比尝试变得太花哨容易得多。 这也是一个<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>
在UL标签上尝试以下内容。 这应该照顾子弹覆盖你的形象，你不必乱搞左列表引起的list-position: inside 。
overflow: hidden; padding-left: 2em;
用这个自己挣扎。 我pipe理的最好的是以下内容：
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 {float：left; 背景：蓝色; }
在与几个项目中的这个有趣的问题作斗争，并调查为什么会发生，我终于相信我find了两个： 工作和“响应”的解决scheme。
这里是魔术，现场示例： 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内部工作，不能访问doc的头部，发现使用margin-right: 20px作为图像的内联样式更容易。 我欠这个网站 。
尝试这个：
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;
margin-left：auto会导致元素本身被右alignment。 设置你想要的元素的高度和宽度 – 在我的它是一个div里面的背景图像
你也可以尝试将ul浮动到左边，并为它定义一个合适的width ，以便它漂浮在图像旁边。
有点像这个jsfiddle ？
我用它固定
div.class-name ul { clear: both; }
width: auto; overflow: hidden;
添加display:table; 到ul ：
ul{display:table;}
