如何隐藏在导航菜单和页脚的联系，但子弹向他们展示项目上市(how to hide <li>

我有一个导航菜单，页脚，以及使用上市风格列出链接和图片幻灯片。我有CSS list-style:none; 设置为隐藏子弹旁边的导航和页脚的链接和图片，但我想，以显示列表普通文本的子弹。

我怎样才能做到这一点？

Answer 1:

这个例子波纹管介绍如何使用的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>

Answer 2:

您需要定义一个类，你要隐藏的子弹。举些例子

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

然后将其应用到要隐藏的子弹列表：

<ul class="no-bullets">

所有其他列表（没有一个具体的类）将显示bulltets如常。

Answer 3:

您可以风格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;
}

Answer 4:

比方说，你正在使用此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; }

Answer 5:

我结合一些弗拉维奥的回答这个小的解决方案 。

.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去除同样适用于有序列表。

Answer 6:

您也可以定义你要显示的子弹一类，所以在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">

所有其他列表将不会显示子弹...

文章来源: how to hide

bullets in navigation menu and footer links BUT show them for listing items