无法使用项目符号设置HTML列表元素的样式

Question

我有以下HTML和CSS代码：

<ul class="new">
    <li>OWNER OCCUPIED LOAN PROPERTY</li>
    <li>INVESTMENT LOAN</li>
    <li>FIRST HOME BUYER</li>
    <li>REFINANCING</li>
</ul>

.story ul {
    list-style: disc;
    margin: 0 0 26px 35px;
}

但是，列表元素没有光盘。我不明白为什么。

直播网站RStudio GitHub。

Answer 1

display: block;一切都很好，花花公子，但它不是你想要的。在'style.css'中更改

ul.new li {display: block;}

到

ul.new li {display: list-item;}

光盘完美呈现。如果需要list-items，请使用list-items。欢呼声。

Answer 2

您可以使用以下格式来提供列表样式：

ul.new > li 
{ 
list-style: disc;
margin: 0 0 26px 35px;    
}

Answer 3

这是因为有一个具有CSS属性ul.new li的类display: block。删除此样式后，所需的光盘将被删除。将会回来。

Answer 4

HTML＆amp; CSS列表

在HTML中，有两种主要类型的列表：

• 无序列表（<ul>） - 列表项标有项目符号
• 有序列表（<ol>） - 列表项标有数字或字母

CSS列表属性允许您：

• 为有序列表设置不同的列表项标记
• 为无序列表设置不同的列表项标记
• 将图像设置为列表项标记
• 为列表和列表项添加背景颜色

速记

list-style简写属性在一个声明中设置所有列表属性。

list-style: list-style-type list-style-position list-style-image|initial|inherit;

如果您不想使用速记，可以将主题分开：

• 列表样式型
• 列表样式位置
• 列表样式图像

回答您的问题

要仅使用list-style-type，您可以执行以下操作：

<强> HTML

<ul class="new">
    <li>OWNER OCCUPIED LOAN PROPERTY</li>
    <li>INVESTMENT LOAN</li>
    <li>FIRST HOME BUYER</li>
    <li>REFINANCING</li>
</ul>

<强> CSS

ul.new{
    list-style-type: disc;
}

OR

<强> HTML

<ul class="story">
    <li>OWNER OCCUPIED LOAN PROPERTY</li>
    <li>INVESTMENT LOAN</li>
    <li>FIRST HOME BUYER</li>
    <li>REFINANCING</li>
</ul>

<强> CSS

ul.story{
    list-style-type: disc;
}

问题来源

您使用了<ol>代表有序列表，它使用数字。您可能希望将其切换为<ul>以获得所需的输出。