CSS：为什么列表项显示没有项目符号？答案

【问题标题】：CSS: why is list item shown without bullet?CSS：为什么列表项显示没有项目符号？
【发布时间】：2012-09-27 03:09:29
【问题描述】：

我有一个物品清单：

<ul>
    <li> item 1 </li>
    <li> item 2 </li>
</ul>

这些显示没有项目符号。但为什么？以下是从 Chrome 的 Inspect 元素复制粘贴的所有计算样式。我需要改变什么？ Display:list-item 和 list-style-type:disc 好像没问题。

（我正在通过 javascript 注入 html。这意味着我可以创建自己的样式类来覆盖任何原本会被继承的样式，但我不能从父母那里“删除”任何样式。）

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-size: auto;
color: red;
display: list-item;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 14px;
height: 17px;
list-style-type: disc;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: left;
width: 1389px;

【问题讨论】：

我在这里看不到任何应该删除它的东西。也许尝试删除左侧的边距和填充...
请提供详细说明问题的演示。 jsFiddle 是分享演示的好方法。
我刚刚对问题添加了一个编辑：“我正在通过 javascript 注入 html。这意味着我可以创建自己的样式类来覆盖任何原本会被继承的样式，但我不能从父母那里“删除”任何样式。”这也意味着我不能这么容易地展示一个演示。这是其他人的页面与注射。

标签： css html-lists

【解决方案1】：

尝试提供额外的样式 list-style-position:inside; 并检查 sample 代码。

无需更改内边距或边距。

【讨论】：

【解决方案2】：

它们存在，只是不可见。你打破了左边界。试试

padding-left: 20px;

或

margin-left: 20px;

【讨论】：

酷，成功了（或者两者兼而有之，尽管 padding-left:20px 仍然切断了一些数字。）我将继承未知样式，所以我基本上需要重置所有内容。