48

我有一个导航菜单、页脚和幻灯片，它们使用列出的样式来列出链接和图像。我将csslist-style:none;设置为隐藏导航和页脚中链接和图像旁边的项目符号，但我想显示列表普通文本的项目符号。

我怎样才能做到这一点？

4

7 回答 7

38

下面的示例解释了如何使用 css 样式类删除项目符号。您可以使用，类似于 css 类，按标识符 (#id)，按父标记等。您可以使用相同的方式定义 css 以从页脚中删除项目符号。

我以这个网站为起点。

<html>
<head>
<style type="text/css">
div.ui-menu li {
    list-style:none;
    background-image:none;
    background-repeat:none;
    background-position:0; 
}
ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
li
{
    background-image:url(sqpurple.gif);
    background-repeat:no-repeat;
    background-position:0px 5px; 
    padding-left:14px;
}
</style>
</head>

<body>

<div class="ui-menu">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>
于 2012-05-07T19:45:33.210 回答
37

您需要为要隐藏的项目符号定义一个类。举些例子

.no-bullets {
    list-style-type: none;
}

然后将其应用于您想要隐藏项目符号的列表：

<ul class="no-bullets">

所有其他列表（没有特定类别）将照常显示项目符号。

于 2012-05-07T19:33:07.900 回答
6

li您可以根据它们的class、它们的id或它们的祖先元素对元素进行不同的样式设置：

li { /* styles all li elements*/
    list-style-type: none;
}

#ParentListID li { /* styles the li elements that have an ancestor element
                      of id="ParentListID" */
    list-style-type: bullet;
}

li.className { /* styles li elements of class="className" */
    list-style-type: bullet;
}

或者，使用祖先元素：

#navigationContainerID li { /* specifically styles the li elements with an ancestor of
                               id="navigationContainerID" */
    list-style-type: none;
}

li { /* then styles all other li elements that don't have that ancestor element */
    list-style-type: bullet;
}
于 2012-05-07T19:32:37.230 回答
3

当子弹必须隐藏然后使用：

li { list-style: none;}

当子弹必须列出显示时，请使用：

li { list-style: initial;}

于 2020-07-01T11:11:00.247 回答
1

假设您正在使用这个 HTML5 布局：

<html>
    <body>
        <header>
            <nav><ul>...</ul></nav>
        </header>
        <article>
            <ul>...</ul>
        </article>
        <footer>
            <ul>...</ul>
        </footer>
    </body>
</html>

你可以在你的 CSS 中说：

header ul, footer ul, nav ul { list-style-type: none; }

如果您使用的是 HTML 4，请将 ID 分配给您的 DIV（而不是使用新的 fancy-pants 元素）并将其更改为：

#header ul, #footer ul, #nav ul { list-style-type: none; }

如果您使用的是 CSS 重置样式表（如 Eric Meyer 的），您实际上必须返回列表样式，因为重置会从所有列表中删除列表样式。

#content ul { list-style-type: disc; margin-left: 1.5em; }
于 2012-05-07T19:53:21.230 回答
1

我结合了Flavio对这个小解决方案的一些回答。

.hidden-ul-bullets li {
    list-style: none;
}
.hidden-ul-bullets ul {
    margin-left: 0.25em; // for my purpose, a little indentation is wished
}

关于子弹的决定是在一个封闭元素上做出的，通常是div. 我的解决方案的缺点（或待办事项）是 liststyle 删除也适用于有序列表。

于 2013-11-13T09:07:12.867 回答
0

您还可以为要显示的项目符号定义一个类，因此在 CSS 中：

ul {list-style:none; list-style-type:none; list-style-image:none;}

在 HTML 中，您只需定义要显示的列表：

<ul style="list-style:disc;">

或者您也可以定义一个 CSS 类：

.show-list {list-style:disc;}

然后将其应用于您要显示的列表：

<ul class="show-list">

所有其他列表都不会显示项目符号...

于 2013-11-30T12:42:52.463 回答