Позбавлення від кульових очок від <ul>

163

У мене є такий список:

 <ul id="otis">
 <li>Benz</li>
 <li>Other Benz</li>
 <li>Other Other Benz</li>
 </ul>

Я хочу позбутися від куль, тому я спробував:

 ul#otis {
 list-style-type: none;
 }

Але це не спрацювало. Який правильний спосіб видалити кулі з відображеного списку?

html html-lists

— Сем Хан
джерело

1

Ваш поточний HTML / CSS прекрасно працює для мене у FF (JSFiddle). Який браузер ви використовуєте? Подивіться, чи list-style: noneпрацює натомість.

— Bojangles

1

Я спробував це у всіх браузерах і на Mac та Windows OS. я використовую html5 doctype ...

— Сем Хан

197

Якщо припустити, що це не спрацювало, можливо, ви захочете поєднати idселектор-базу з liтим, щоб застосувати css до liелементів:

#otis li {
    list-style-type: none;
}

Довідка:

list-style-typeв Центрі розробників Mozilla .

— Девід каже повернути Моніку
джерело

У чому різниця робити ul#otisі #otis?

— PeeHaa

Насправді не існує жодного, я, гм, просто не побачив idселектора, який ви використовували. На жаль ... вибачте!

— Девід говорить, що поверніть Моніку

1

де на цьому посиланні я можу знайти, що його потрібно визначити на li?

— PeeHaa

Перші дві пропозиції: «У list-style-typeCSS властивість визначає появу елемента елемента списку , так як це тільки один , який по замовчуванню. display:list-item» (Хоча це не допустити , що він може звернутися до будь-якого елементу з displayмайном). Хоча вони і визначають це, наприклад, під olелементом. Особисто я завжди за замовчуванням визначаю це як для списку ( ul/ ol), так і для liелементів.

— Девід каже повернути Моніку

27

У мене була така ж надзвичайно дратівлива проблема, оскільки сценарій не звертав уваги на мою таблицю. Тому я написав:

<ul style="list-style-type: none;">

Це не вийшло. Таким чином, на додаток , я писав:

<li style="list-style-type: none;">

Вуаля! це спрацювало!

— Джон Олав
джерело

20

Щоб видалити точки кулі з упорядкованих списків, ви можете використовувати:

list-style: none;

Ви також можете використовувати:

list-style-type: none;

Або працює, але перший - це коротший спосіб отримати той же результат.

— Філпот
джерело

18

Наступний код

#menu li{
  list-style-type: none;
}

<ul id="menu">
        <li>Root node 1</li>
        <li>Root node 2</li>
    </ul>

Розгорніть фрагмент

дасть цей вихід:

вихід є

— Кишань
джерело

15

Спробуйте це замість тестування на Chrome / Safari

ul {
 list-style: none;
}

— Пол Каплан
джерело

4

Покладіть

<style type="text/css">
 ul#otis {
     list-style-type: none;
   }
</style>

безпосередньо перед списком, щоб перевірити його. Або

<ul style="list-style-type: none;">

— Речі
джерело

4

Щоб вилучити кулю з ULвас, ви можете просто скористатися list-style: none;або list-style-type: none;Якщо все ще не працює, то, мабуть, існує проблема пріоритетного CSS . Можливо, глобально UL вже визначено. Тож найкраще додати клас / ідентифікатор до цього конкретного UL та додати свій CSS туди. Сподіваюся, це спрацює.

— Рокан Нашп
джерело

4

Це прекрасно працювало HTML

<ul id="top-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Process</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

CSS

#top-list{
  list-style-type: none;
  list-style: none;}

— покумарів
джерело

3

Має бути щось інше.

Тому що:

   ul#otis {
     list-style-type: none;
   }

повинен просто працювати.

Можливо, є якесь правило CSS, яке його перезаписує.

Скористайтеся інспектором DOM, щоб дізнатися це.

— PeeHaa
джерело

3

У мене була така ж проблема, і спосіб, коли я закінчив її виправити, був такий:

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

Можливо, це трохи екстремально, але коли я це зробив, це працювало для мене.

Сподіваюся, що це допомогло

— Бреден Бест
джерело

3

для аркуша стилів вбудованого тексту спробуйте цей код

<ul style="list-style-type: none;">
    <li>Try This</li>
    </ul>

— Лука
джерело

1

Ваш код:

ul#otis {
    list-style-type: none;
}

моя пропозиція:

#otis {
    list-style-type: none;

}

у css потрібно використовувати лише #idnot element#id. Більше корисних підказок надано тут: w3schools

— Еван
джерело

0

У мене була однакова проблема.

Рішення полягало в тому, що куля була додана через фонове зображення , а не через тип списку. Швидкий "фон: немає", а Боб - твій дядько!

— Раскін
джерело