1

我在我的网站上的某处进行了无法回溯的更改，并且由于某种原因，我在所有水平列表中全局丢失了 CSS3 项目符号。但无论如何，在我看来，这段代码应该可以工作......但是使用 float: left 我松开了子弹，无法保留它们。谁能告诉我为什么我不能用浮动保留子弹：左？

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;
}
4

4 回答 4

2

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

您可以像这样在 before 伪元素上注入您自己的光盘：

http://jsfiddle.net/eyDc6/

li {
    display: inline-block;
}

li:before {
    content: "\2022";
}
于 2013-02-11T21:49:54.730 回答
1

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

编辑：或者不是，虽然我已经看到了这种情况。您始终可以使用 css :before 选择器 ( http://www.w3schools.com/cssref/sel_before.asp ) 作为解决方法。

于 2013-02-11T21:04:21.120 回答
0

在这种情况下尝试使用display: inline-block而不是float:left

于 2013-02-11T21:03:42.127 回答
0

我在图像右侧浮动列表时遇到了同样的问题。项目符号出现在图像上，不再与其余浮动文本对齐。

这段css解决了我的问题。

ul { overflow: hidden; }

希望这有帮助。

于 2016-05-12T10:04:23.950 回答