I Have 15 names, and what I want to do is to divde the names in three rows (5names on each row), at the moment Iam using <ul>
and <li>
tags
is there some possible way to have three rows 5 names on each row? using still the li
and ul
tags?
If you want to make this navigational unordered list horizontal, you have basically two options: Make the list items inline instead of the default block. .li { display: inline; } This will not force breaks after the list items and they will line up horizontally as far as they are able. Float the list items.
As others have mentioned, you can set the li to display:inline; , or float the li left or right. Additionally, you can also use display:flex; on the ul . In the snippet below I also added justify-content:space-around to give it more spacing. For more information on flexbox, checkout this complete guide.
Displaying List. The quickest way to display a list on a single line is to give the <li> elements a display property value of inline or inline-block . Doing so places all the <li> elements within a single line, with a single space between each list item.
Find a list of methods do to what you want here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With