Как скрыть <li> маркеры в меню навигации и нижних колонтитулах, но покажите их для элементов списка

У меня есть меню навигации, нижний колонтитул и слайд-шоу, которые используют указанный стиль для отображения ссылок и изображений. У меня есть css list-style:none;, чтобы скрыть пули рядом со ссылками и изображениями в навигаторе и нижнем колонтитуле, но я хочу показать пули для обычного текста списка.

Как я могу это сделать?

Ответы

Ответ 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>

Ответ 2

Вам нужно определить класс для пулей, которые вы хотите скрыть. Для примеров

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

Затем примените его к списку, который вы хотите спрятать:

<ul class="no-bullets">

Все остальные списки (без определенного класса) будут отображаться как бы обыгрывающие.

Ответ 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;
}

Ответ 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, назначьте идентификаторы своим DIVs (вместо использования новых элементов "причудливых штанов" ) и измените это на:

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

Если вы используете таблицу стилей CSS reset (например, Eric Meyer's), вам действительно нужно будет вернуть стиль списка, так как reset удаляет стиль списка из всех списков.

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

Ответ 5

Я добавил несколько ответ 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. недостаток (или todo) моего решения заключается в том, что удаление liststyle также относится к упорядоченным спискам.

Ответ 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">

Все остальные списки не будут отображать пули...