CODEWITHSUNDEEP
htmlcsshtml-lists
Joquantinbalow
Joquantinbalow

Reputation: 53

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

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;
}

Upvotes: 1

Views: 1296

Answers (2)

Dennis van den Brock
Dennis van den Brock

Reputation: 36

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

So:

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

Upvotes: 0

Aman Sharma
Aman Sharma

Reputation: 964

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>

Upvotes: 1

Related Questions