Питання Потрібно невпорядкований список без куль


Я створив невпорядкований список. Я відчуваю, що кулі в неупорядкованому списку викликають набридливість, тому я хочу їх видалити.

Чи можна мати список без куль?


2045
2018-06-22 13:57


походження




Відповіді:


Ви можете видалити кулі, встановивши list-style-type до none на CSS для батьківського елемента (як правило, a <ul>), наприклад:

ul {
  list-style-type: none;
}

Ви також можете додати padding: 0 і margin: 0 до цього, якщо ви хочете видалити відступи також.

Побачити Перелік документів для прекрасного перегляду методів форматування списку.


3046
2018-06-22 14:00



не працює на IE9, вам потрібен тип списку оголошень: немає; до лі - tovmeod
@robaker він забирає їх лише 15 років, щоб отримати це правильно, і коли більшість людей ще не використовують IE10. зітхає ... Якось я ненавиджу M $. Лол - Panama Jack
Ми не розробляємо для IE9 в 2015 році для запису - Dom Vinyard
Якщо ми розглянемо ІЕ, то в цьому столітті жоден веб-сайт не може бути завершений. - Ankit
@DomVinyard Ми все ще розробляємо для IE8 в 2016 році, для запису ... - Amy Barrett


Якщо ви використовуєте Bootstrap, у нього є клас "unstyled":

Видаліть стиль списку за умовчанням та ліва оздоблення на елементах списку (лише для дітей).

Bootstrap 2:

<ul class="unstyled">
   <li>...</li>
</ul>

http://twitter.github.io/bootstrap/base-css.html#typography

Завантажувальний 3 і 4:

<ul class="list-unstyled">
   <li>...</li>
</ul>

http://getbootstrap.com/css/#type-lists


469
2017-07-11 15:05



У Boostrap 3 це дещо змінилося: class = "list-unstyled" - guido
Просто цікаво, де ви, хлопці, читали це? Я шукав її, але не знайшов. - Skytiger
@Skytiger getbootstrap.com/css/#type-lists - Danation
Клас завантаження 3 також працює з Bootstrap 4 - Christophe Roussy
Насправді, ця відповідь саме те, що я шукав. І Bootstrap використовується на 3,6% всього Інтернету, тому це не зменшується. trends.builtwith.com/docinfo/Twitter-Bootstrap  Швидкий пошук Google показує, що Bootstrap послідовно розміщується в категорії "найпопулярніші рамки CSS". - Bobort


Ви повинні використовувати list-style: none;

<ul style="list-style: none;">
    <li> ...</li>
</ul>

183
2018-06-22 14:00



Відмінне рішення. Я шукав рішення, яке не вимагало редагування файлу CSS. Дуже дякую! - Kevin Groen
@Kevin: Це вбудований CSS ... найкращі практики вважаються, ви дійсно повинні помістити це в файл CSS. - aboveyou00
Відмінне рішення, особливо, якщо CSS підтримує бажане форматування. - Mohammed
Ця відповідь працює без Bootstrap. Також не потрібно створювати додатковий * .css файл. Власне, це типовий приклад того, як вставляти CSS-код у єдиний HTML-файл. - anonymous
"найкраща практика" часто на очах спостерігача - і / або для конкретної програми. Наприклад, це мені допомагало, коли більшість списків відмінно від кулі, однак я хотів створити власні піктограми в одному конкретному списку. Зміна .css вплине на всі списки, а вбудований - лише один. Отже, іноді "найкращим" є те, що вам потрібне у потрібному Вам місці. - CFP Support


в css, стилі

 list-style-type: none;

49
2018-06-22 14:00





Вам слід додати стиль до <ul> елемент виглядає наступним чином:

<ul style="list-style: none; ">
    <li>Item</li>
    ...
    <li>Item</li>
</ul>

Це зніме кулі. Ви також можете додати CSS у таблиці стилів, як наведені вище приклади.


43
2018-06-22 14:02



зараз в> 3.0 це - список, не розписаний - Adam Pflantzer
в> 3.0 вам, можливо, доведеться додати його і до li - codechurn
@AdamPflantzer те, що 3.0 має на увазі. Немає підключення до питання та відповіді - Ghostwriter78
Він має на увазі Bootstrap, який не має нічого спільного з цією відповіддю. - Bobort


в css ...

ul {
   list-style:none;
}

41
2018-06-22 14:00





Невелике уточнення до вищесказаного: зробити довільні рядки більш читабельними, якщо вони вилинуть на додаткові рядки екрана:

ul, li {list-style-type: none;}

li {padding-left: 2em; text-indent: -2em;}

34
2017-12-10 05:55



Працює, але тільки для IE8 - Underverse


Використовуйте такий CSS:

ul {
  list-style-type: none
}

34
2018-06-22 14:00





Рідний:

ul { list-style-type: none; }

Бутстрап:

<ul class="list-unstyled list-group">
    <li class="list-group-item">...</li>
</ul>

Примітка: Якщо ви використовуєте групи-списки, то немає необхідності в списку, не опублікованих.


17
2018-05-14 21:23





Я використовував стиль списку як на вузлі, так і на лі, щоб видалити кулі. Я хотів замінити кулі власним персонажем, у цьому випадку "тире", що дає хороший ефект. Отже, використовуючи цю розмітку:

<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>

з цим css:

ul.dashed-list
{
    list-style: none outside none;
}

ul.dashed-list li:before {
    content: "\2014";
    float: left;
    margin: 0 0 0 -27px;
    padding: 0;
}

ul.dashed-list li {
    list-style-type: none;
}

дає чудово відступний ефект, який працює, коли текст обгортається


13
2017-09-17 04:52





Якщо ви не можете зробити це на роботі <ul> рівень, вам, можливо, доведеться помістити list-style-type: none; біля <li> рівень:

<ul>
    <li style="list-style-type: none;">Item 1</li>
    <li style="list-style-type: none;">Item 2</li>
</ul>

Ви можете створити клас CSS, щоб уникнути цього повторення:

<style>
ul.no-bullets li 
{
    list-style-type: none;
}
</style>

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

РЕДАГУВАТИ: При необхідності використовуйте !important:

<style>
ul.no-bullets li 
{
    list-style-type: none !important;
}
</style>

13
2017-10-08 08:14