与列表式<li> </li>混淆

Question

li出现问题，当我li inline显示list-style（项目符号点数）时，{子弹点>显示未发现子弹点。

Answer 1

bullet-point 不是list-style的有效值。相反，请使用one of these：

• 无无标记
• 圈标记为圆圈
• 光盘标记是一个实心圆圈。这是默认的
• square 标记是正方形
• 亚美尼亚语该标记是传统的亚美尼亚语编号
• 十进制标记是一个数字
• decimal-leading-zero 标记是由初始零填充的数字（01,02,03等）
• georgian 标记是传统的格鲁吉亚编号（an，ban，gan等）
• lower-alpha 标记低-α（a，b，c，d，e等）
• 低希腊标记是低希腊语（alpha，beta，gamma等）
• 低拉丁标记是低拉丁语（a，b，c，d，e等）
• lower-roman 标记为低级罗马（i，ii，iii，iv，v等）
• upper-alpha 标记为上-α（A，B，C，D，E等）
• 上拉丁标记是上拉丁语（A，B，C，D，E等）
• upper-roman 标记为上罗马（I，II，III，IV，V等）
• inherit 指定应从父元素继承list-style-type属性的值

Click through详细了解此信息，包括浏览器支持

Answer 2

列表项目符号会显示，因为<li>元素默认情况下为display: list-item。如果您将其更改为其他任何内容（例如display: inline甚至display: block），则子弹消失。

如果您想完成水平菜单，您有两种可能：

1. 保留默认的display属性并使用float代替
2. 使用背景图像模拟项目符号

Answer 3

如果您需要跨浏览器兼容性以下是2种方法

1. 使用图片li {background-image:url(bullet.gif) no-repeat center left;padding-left:20px;display:inline;}

2. 或使用此•

<li>&bull; Lorem ipsum dolor sit amet</li>

Answer 4

我认为你必须使用浮动，如果你想显示流动的列表项而不是块加上看到子弹

Answer 5

你是否为ul或li设置了边距/填充？您是否在样式表设置列表样式中将浏览器重置为无？我猜它是这两件事之一。

Answer 6

另一种选择，遗憾的是不是跨浏览器：

li
{
    display: inline;
}
li:before
{
    content: '•';
    padding: 0 .5em;
}