Html 如何在导航菜单和页脚链接中隐藏 <li> 项目符号但显示它们以列出项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10487908/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to hide <li> bullets in navigation menu and footer links BUT show them for listing items
提问by user1373581
I have a navigation menu, footer, and a slideshow which use listed style to list links and images. I have the css list-style:none;set to hide the bullets next to the links and images in the nav and footer but I want to show the bullets for list normal text.
我有一个导航菜单、页脚和一个幻灯片，它们使用列出的样式来列出链接和图像。我将 csslist-style:none;设置为隐藏导航和页脚中链接和图像旁边的项目符号，但我想显示列表普通文本的项目符号。
How can I do this?
我怎样才能做到这一点？
采纳答案by Flavio Cysne
The example bellow explains how to remove bullets using a css style class. You can use , similar to css class, by identifier (#id), by parent tag, etc. The same way you can use to define a css to remove bullets from the page footer.
下面的示例解释了如何使用 css 样式类删除项目符号。您可以使用，类似于 css 类，通过标识符 (#id)，通过父标签等。您可以使用相同的方式定义 css 以从页面页脚中删除项目符号。
I've used this siteas a starting point.
我用这个网站作为起点。
<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>
回答by Israel Unterman
You need to define a class for the bullets you want to hide. For examples
您需要为要隐藏的项目符号定义一个类。举些例子
.no-bullets {
list-style-type: none;
}
Then apply it to the list you want hidden bullets:
然后将其应用于您想要隐藏项目符号的列表：
<ul class="no-bullets">
All other lists (without a specific class) will show the bulltets as usual.
所有其他列表（没有特定类）将像往常一样显示项目符号。
回答by David says reinstate Monica
You can style lielements differently based on their class, their idor their ancestor elements:
您可以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;
}
Or, to use the ancestor elements:
或者，使用祖先元素：
#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;
}
回答by Derreck Dean
Let's say you're using this HTML5 layout:
假设您正在使用此 HTML5 布局：
<html>
<body>
<header>
<nav><ul>...</ul></nav>
</header>
<article>
<ul>...</ul>
</article>
<footer>
<ul>...</ul>
</footer>
</body>
</html>
You could say in your CSS:
你可以在你的 CSS 中说：
header ul, footer ul, nav ul { list-style-type: none; }
If you're using HTML 4, assign IDs to your DIVs (instead of using the new fancy-pants elements) and change this to:
如果您使用的是 HTML 4，请为您的 DIV 分配 ID（而不是使用新的花式裤子元素）并将其更改为：
#header ul, #footer ul, #nav ul { list-style-type: none; }
If you're using a CSS reset stylesheet (like Eric Meyer's), you would actually have to give the list style back, since the reset removes the list style from all lists.
如果您使用的是 CSS 重置样式表（如 Eric Meyer 的），您实际上必须返回列表样式，因为重置会从所有列表中删除列表样式。
#content ul { list-style-type: disc; margin-left: 1.5em; }
回答by Wolf
I combined some of Flavio's answerto this small solution.
.hidden-ul-bullets li {
list-style: none;
}
.hidden-ul-bullets ul {
margin-left: 0.25em; // for my purpose, a little indentation is wished
}
The decision about bullets is made at an enclosing element, typically a div. The drawback(or todo) of my solution is that the liststyle removal also applies to ordered lists.
关于子弹的决定是在一个封闭的元素上做出的，通常是 a div。我的解决方案的缺点（或待办事项）是 liststyle 删除也适用于有序列表。
回答by Marcus
You can also define a class for the bullets you want to show, so in the CSS:
您还可以为要显示的项目符号定义一个类，因此在 CSS 中：
ul {list-style:none; list-style-type:none; list-style-image:none;}
And in the HTML you just define which lists to show:
在 HTML 中，您只需定义要显示的列表：
<ul style="list-style:disc;">
Or you alternatively define a CSS class:
或者你也可以定义一个 CSS 类：
.show-list {list-style:disc;}
Then apply it to the list you want to show:
然后将其应用于要显示的列表：
<ul class="show-list">
All other lists won't show the bullets...
所有其他列表都不会显示项目符号...
