css - 子弹与 float 冲突 :left in IE7

Question

此问题出现在 Internet Explorer 中，我无法解决:

#test ul li {
list-style-type: disc;
float: left;
margin-left: 10px;
font-size: 16px;
}

上面的代码在 Firefox 和 Chrome 中运行良好，但在 IE7 中它不显示元素符号。

我已经尝试停用属性 float: left 并且元素符号正在显示，但列表是垂直的。我的列表必须与元素符号水平对齐。

我尝试添加以下属性:

• list-style-position: inside 和 outside and nothing.

• 使用 display: inline 使元素符号消失。

#test ul {
list-style-type: disc
}

• 什么都没有

我试过用不同的值改变边距，用不同的值添加填充，但什么都没有。

Answer 1

您可以将 li 的内联和 ul 的 list-style 设置为 none 然后使用 :before 伪元素模拟子弹:

ul {
list-style: none;
margin: 0;
}
li {
display: inline;
}
li::before {
content: "o ";
}

当然，您可以使用表示元素符号的 unicode 字符代替“o”。