Html ul li убрать маркер

Find centralized, trusted content and collaborate around the technologies you use most.

Connect and share knowledge within a single location that is structured and easy to search.

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. How can I do this?

7 Answers 7

You need to define a class for the bullets you want to hide. For examples

Then apply it to the list you want hidden bullets:

All other lists (without a specific class) will show the bulltets as usual.

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.

I’ve used this site as a starting point.

This worked for me in my latest effort to style a WordPress child theme. But in this case there was also a ::before specified, which made a bullet out of a 3px border out of a point. That also had some padding. So when employing something like this, just give a glance if there are other competing CSS styles.

You can style li elements differently based on their class , their id or their ancestor elements:

li < /* styles all li elements*/ list-style-type: none; >#ParentListID li < /* styles the li elements that have an ancestor element of */ list-style-type: bullet; >li.className < /* styles li elements of */ list-style-type: bullet; >

Or, to use the ancestor elements:

#navigationContainerID li < /* specifically styles the li elements with an ancestor of */ list-style-type: none; >li < /* then styles all other li elements that don't have that ancestor element */ list-style-type: bullet; >

when bullet have to hide then use:

when bullet have to list show, then use:

Appreciate your reply. In case you want to add some formatting to your replies, can use this guide Markdown help.

I combined some of Flavio’s answer to 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.

Let’s say you’re using this HTML5 layout:

You could say in your CSS:

header ul, footer ul, nav ul

If you’re using HTML 4, assign IDs to your DIVs (instead of using the new fancy-pants elements) and change this to:

#header ul, #footer ul, #nav ul

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.

Источник

Как убрать маркеры в маркированном списке?

Для этой цели применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору UL или LI как показано в примере 1.

Пример 1. Список без маркеров

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Список без маркеров

Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо. Чтобы управлять положением элементов списка, для селектора UL в данном примере добавлены свойства margin-left и padding-left . Два свойства вместо одного требуется, чтобы одинаково показывать результат в разных браузерах.

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Как убрать маркеры в маркированном списке?

Пример 1. Список без маркеров

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Список без маркеров

CSS по теме

Как сделать список без точек в HTML

Список — часто повторяющийся на странице элемент, он может принимать разные формы, использоваться для перечисления похожих объектов, быть списком услуг, адресов или карточек товаров в каталоге.

bullet

Но если вы верстаете, например, карточки товаров, перечисление услуг или список преимуществ в виде сетки с иллюстрациями, то явно будут мешать лишние символы.

Как сделать список без буллитов, если они не нужны?

Отключение буллитов у списка в теге

⚠️ Несмотря на то, что стиль, прописанный прямо в файле HTML, точно сработает, лучше выносить стили в отдельный файл CSS. Иногда встречается стилизация списка по тегу, но это тоже не самый лучший вариант.

Если на сайте изменится дизайн или наполнение, стилизация по тегу усложнит внесение корректировок. Поэтому практичнее прописать все стили в файле CSS. Тогда при переделке сайта достаточно убрать или заменить определенное свойство и при этом не менять ничего в вёрстке.

Отключение буллитов в CSS

Самый актуальный способ убрать буллиты из списка — использовать свойство list-style-type в файле со стилями. Чтобы задать свойство, присвойте списку ul класс, например, nobullet .

Тогда стилизация этого класса будет выглядеть так:

👉 CSS-свойство list-style-type отвечает не только за удаление буллитов, также у него есть другие полезные значения, которые позволят изменять вид стандартного буллита.

Если на странице несколько списков, в одном нужны буллиты, а в других нет, присвойте им разные классы и сверстайте каждый список в нужном стиле.

Отключение буллита у определенного элемента списка

Как заменить буллиты на изображения

В некоторых ситуациях вместо буллитов необходимо разместить тематические иконки или картинки. Например, в списках преимуществ на лендингах, описании услуг или перечне продуктов.

Для решения такой задачи применяется CSS-свойство list-style-image . Подробнее о нём в спецификации.

Но не стоит увлекаться и добавлять вместо буллитов тяжелые красочные картинки, это может существенно повлиять на скорость загрузки сайта, и пользователь не скажет вам «спасибо».

Дополнительные материалы:

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Читайте также: Php set object values

Html ul li убрать маркер