Question

我在网站的某个地方做了一些改动，我无法回溯，出于某种原因，我在所有水平列表中全局丢失了CSS3项目符号。但无论如何，在我看来，这个代码应该工作......但是浮动：左边我松开了子弹而不能保留它们。谁能告诉我为什么我不能用浮子保留子弹：左？

ul#info {
    padding-top: 20px;
    text-align: center;
    color: white;
}

ul#info li:first-child {
    list-style: none;
}

ul#info li {
    list-style: disc;
    float: left;
    padding-right: 10px;
    font-size: 20%;
    list-style-position: inside;
}

Answer 1

浮动元素会将其更改为块框，除非将其设置为 none ，否则将忽略显示类型。由于元素不再是display: list-item，因此列表相关属性都不会影响它。

您可以在before伪元素上注入自己的光盘，如下所示：

http://jsfiddle.net/eyDc6/

li {
    display: inline-block;
}

li:before {
    content: "\2022";
}

Answer 2

您的项目符号隐藏在ul的左边缘 - 当浏览器决定将列表浮动到何处时，不会考虑它们的宽度。尝试添加一些左边填充和/或边距。

编辑：或不，虽然我已经看到这种情况发生了。你总是可以使用css：before selector（http://www.w3schools.com/cssref/sel_before.asp）作为解决方法。

Answer 3

在这种情况下，尝试使用display: inline-block代替float:left

Answer 4

我有一个浮动在图像右侧的列表的问题。子弹在图像上移动，不再与浮动文本的其余部分对齐。

这段CSS解决了我的问题。

ul { overflow: hidden; }

希望得到这个帮助。

CSS3没有Float的子弹：左

4 个答案: