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

我有一个（XHTML严格要求的）页面，在该页面中，我在文本的常规段落旁边浮动一个图像。除了使用列表而不是段落外，一切都进行得很顺利。列表中的项目符号与浮动图像重叠

更改列表或列表项的边距没有帮助。页边距是从页面左侧开始计算的，但浮动将列表项推到

li

本身的右侧。因此，只有当我使其比图像更宽时，边距才有帮助

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

设置

li{list style position:inside}

会将项目符号与内容一起移动，但也会导致换行的行开始与项目符号对齐，而不是与上面的行对齐

---

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

尝试更改项目符号的布局。

我找到了解决这个问题的方法。将

ul{overflow:hidden；}

应用于

ul

可确保框本身被浮点推到一边，而不是框中的内容

在我们的条件注释中，只有IE6需要一个

ul{zoom:1；}

，以确保

ul

具有布局。

在上，我发现了一个对我有用的建议：“li”元素的样式为：

position: relative;
left: 1em;

---

其中，您将“1em”替换为列表项在不存在浮动时所具有的左填充/边距宽度。这在我的应用程序中非常有用，甚至可以处理浮点的底部出现在列表中间的情况——子弹正好返回到（本地）左边的空白。 好的，然后把它分成两个嵌套在一起的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{背景：蓝色；位置：静态；}
.therest{位置：相对；宽度：100%}
.indent{float:left；}

最闪亮的圆顶是黑色的。乌拉姆·科佩尔·埃鲁姆是我的精英。


洛勒姆

列表元素
列表元素
列表元素

其余的都在联邦调查局管辖下

尝试将ul li css更改为

ul{float:left；background:blue；}

试试这个：

li{
    margin-left:5px;
}

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

或者您可以这样做：

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

---

然后从li中删除所有样式

您可以指定的

位置：相对；左：10px到
li
。（您可能还需要给它一个
右边距：10px；
，否则它可能会在右边变得太宽。）

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

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

左边距：自动将使元素本身右对齐。
设置所需元素的高度和宽度-在我的示例中，它是一个div中的背景图像我自己正在努力解决这个问题。我所做的最好的工作如下：

ul{
列表样式位置：内部；
左：1米；
文本缩进：-1em；
}

文本实际上没有缩进，但项目符号显示出来。
这个怎么样

ul{float:left; clear:right}

在没有访问文档头的LMS中工作，发现使用
右边距：20px作为图像的内联样式更容易。这是我的功劳。
请在您的UL标签上尝试以下内容。这应该能够处理覆盖在图像上的子弹，并且你不必因为
列表位置：inside
而弄乱你的左对齐

overflow: hidden; 
padding-left: 2em; 

您还可以尝试将
ul
浮动到左侧，并为其定义适当的
宽度，使其浮动到图像旁边

有点像？
通过添加
溢出：auto到您的
ul
至少对我有效

更新

我已经更新了以可视化正在发生的事情。当浮动
img
旁边有
ul
时，浮动将推动
ul
的内容，而不是实际的容器。通过添加
overflow:auto
整个
ul
-框将由float推动，而不仅仅是内容。
这就是“display”属性的作用。设置下面的CSS，使列表与浮动内容一起工作

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


.img{
浮动：左；
}
.桌子{
显示：表格；
}


测试内容
测试内容
测试内容


测试内容
测试内容
测试内容
对以下内容进行改进：


我更喜欢这种技术，因为当列表需要在浮动图像周围流动时，它可以工作，而
overflow:hidden
技术则不行。但是，还需要在
li
中添加
padding right:1em
，以防止它们溢出容器
 我用这个来解决这个问题：

ul {
   display: table;
}

为什么
溢出：隐藏
有效
解决方案非常简单：

ul {overflow: hidden;}

带有
溢出：
而不是
可见的块框
为其内容建立新的块格式上下文。W3C建议：

例子
上的按钮伪装成这样。使视口（窗口）成为您的
ul {overflow: hidden;}

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

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 */
}

width: auto; overflow: hidden;

ul{display:table;}