如何在<li>导航菜单和页脚链接中隐藏项目符号，但显示它们以列出项目

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

我该怎么做？

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

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

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

<ul class="no-bullets">

所有其他列表（没有特定类）将照常显示公告。

下面的示例解释了如何使用 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>

您可以根据

元素class、id或祖先元素的不同样式li元素：

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;
}

当项目符号必须隐藏时，请使用：

li { list-style: none;}

当项目符号必须列出显示时，请使用：

li { list-style: initial;}

我结合了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）上做出的。我的解决方案的缺点（或待办事项）是列表样式删除也适用于有序列表。

假设您正在使用以下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（而不是使用新的花式裤子元素），并将其更改为：

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

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

#content ul { list-style-type: disc; margin-left: 1.5em; }

您还可以为要显示的项目符号定义一个类，因此在 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">

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

相关内容

最新更新

热门标签：