When removing list bullets with list-style-type: none, how to ensure each item is on a new line?-CodePudding

I added list-style-type: none; to ui style, and it's fine if every list element is about the same length they will all be on their own line. but if one item is very long, it display this:

1.a2.b3.c
4.ddddddddddddd
5.e6.f7.g

Why is it like this? and how to fix it?

here's my css:

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

CodePudding user response：

everything is good, so where is the issue?

maybe your li tag has inline property, then write this in your css li{display: block;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>ddddddddddddddddddd</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
</ul>

CodePudding user response：

Try instead of styling the ul tag, styling th li tag instead.

So:

li {
   display: block
   list-style-type: none;
}