I need an unordered list without any bullets

Question

I have created an unordered list  I feel the bullets in the unordered list are bothersome  so I want to remove them    Is it possible to have a list without bullets

User · Answer

I used list-style on both the ul and the li to remove the bullets  I wanted to replace the bullets with a custom character  in this case a  dash   That gives a nicely indented effect that works fine when the text wraps   x000D   x000D  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    x000D   lt ul class  dashed-list  gt     lt li gt text lt  li gt     lt li gt text lt  li gt   lt  ul gt  x000D   x000D   x000D

User · Answer

To completely remove the ul default style       list-style-type  none       margin  0      margin-block-start  0      margin-block-end  0      margin-inline-start  0      margin-inline-end  0      padding-inline-start  0

User · Answer

You can remove bullets by setting the list-style-type to none on the CSS for the parent element  typically a  lt ul gt    for example   ul     list-style-type  none      You might also want to add padding  0 and margin  0 to that if you want to remove indentation as well   See Listutorial for a great walkthrough of list formatting techniques

User · Answer

In case you want to keep things simple without resorting to CSS  I just put a  amp nbsp  in my code lines  I e    lt table gt  lt  table gt    Yeah  it leaves a few spaces  but that s not a bad thing

User · Answer

If you wanted to accomplish this with pure HTML alone  this solution will work across all major browsers  Description Lists Simply using the following HTML   x000D   x000D       lt dl gt         lt dt gt List Item 1 lt  dt gt           lt dd gt Sub-Item 1 1 lt  dd gt         lt dt gt List Item 2 lt  dt gt           lt dd gt Sub-Item 2 1 lt  dd gt           lt dd gt Sub-Item 2 2 lt  dd gt           lt dd gt Sub-Item 2 3 lt  dd gt         lt dt gt List Item 3 lt  dt gt           lt dd gt Sub-Item 3 1 lt  dd gt       lt  dl gt  x000D   x000D   x000D   Example here  https   jsfiddle net zumcmvma 2  Reference here  https   www w3schools com tags tag dl asp

User · Answer

You can hide them using   marker pseudo-element   Transparent   marker   ul li  marker     color  transparent      x000D   x000D  ul li  marker     color  transparent     ul     padding-inline-start  10px     Just to reset the browser initial padding      x000D   lt ul gt     lt li gt  Bullets are bothersome  lt  li gt     lt li gt  I want to remove them   lt  li gt     lt li gt  Hey    marker to the rescue  lt  li gt   lt  ul gt  x000D   x000D   x000D      marker empty content   ul li  marker     content   quot  quot       x000D   x000D  ul li  marker      content        x000D   lt ul gt     lt li gt  Bullets are bothersome  lt  li gt     lt li gt  I want to remove them  lt  li gt     lt li gt  Hey    marker to the rescue  lt  li gt   lt  ul gt  x000D   x000D   x000D   It is better when you need to remove bullets from a specific list item  ul li nth-child n   marker      Replace n with the list item s position      content   quot  quot       x000D   x000D  ul li not  nth-child 2    marker      content        x000D   lt ul gt     lt li gt  Bullets are bothersome  lt  li gt     lt li gt  But I can live with it using   marker  lt  li gt     lt li gt  Not again though  lt  li gt   lt  ul gt  x000D   x000D   x000D

User · Answer

Small refinement to the previous answers  To make longer lines more readable if they spill over to additional screen lines   ul  li  list-style-type  none    li  padding-left  2em  text-indent  -2em

User · Answer

lt div class  custom-control custom-checkbox left  gt       lt ul class  list-unstyled  gt           lt li gt            lt label class  btn btn-secondary text-left  style  width 100  text-align left padding 2px   gt              lt input type  checkbox  style  zoom 1 7 vertical-align bottom   asp-for   Model i  IsChecked  class  custom-control-input    gt   Model i  Title           lt  label gt           lt  li gt        lt  ul gt   lt  div gt

User · Answer

This orders a list vertically without bullet points  In just one line   li       display  block

User · Answer

If you re using Bootstrap  it has an  quot unstyled quot  class   Remove the default list-style and left padding on list items  immediate children only    Bootstrap 2   lt ul class  quot unstyled quot  gt      lt li gt     lt  li gt   lt  ul gt   http   twitter github io bootstrap base-css html typography Bootstrap 3 and 4   lt ul class  quot list-unstyled quot  gt      lt li gt     lt  li gt   lt  ul gt   Bootstrap 3  http   getbootstrap com css  type-lists Bootstrap 4  https   getbootstrap com docs 4 3 content typography  unstyled

User · Answer

If you re unable to make it work at the  lt ul gt  level  you might need to place the list-style-type  none  at the  lt li gt  level    lt ul gt       lt li style  list-style-type  none   gt Item 1 lt  li gt       lt li style  list-style-type  none   gt Item 2 lt  li gt   lt  ul gt    You can create a CSS class to avoid this repetition    lt style gt  ul no-bullets li       list-style-type  none     lt  style gt    lt ul class  no-bullets  gt       lt li gt Item 1 lt  li gt       lt li gt Item 2 lt  li gt   lt  ul gt    When necessary  use  important    lt style gt  ul no-bullets li       list-style-type  none  important     lt  style gt

User · Answer

I tried and observed   header ul      margin  0     padding  0

User · Answer

ul list-style-type none    Just set the style of unordered list is none

User · Answer

You need to use list-style  none    lt ul style  list-style  none   gt       lt li gt     lt  li gt   lt  ul gt

User · Answer

If you are developing an existing theme  it s possible that the theme has a custom list style  So if you cant t change the list style using list-style  none  in ul or li tags  first check with  important  because maybe some other line of style is overwriting your style  If  important fixed it  you should find a more specific selector and clear out the  important  li       list-style  none  important     If it s not the case  then check the li before  If it contains the content  then do  li before       display  none

[html] I need an unordered list without any bullets

Examples related to html

Examples related to css