0

I have a ul centered to the screen but the list items get displayed 1 by 1 vertically and I'd like to have them displayed horizontally. This is the code:

<nav style="margin: 0; padding: 0; text-align: center;">
    <ul style="list-style: none; display: inline;">
        <li><a href=""> obj1</a></li>
        <li><a href=""> obj2</a></li>
        <li><a href=""> obj3</a></li>
        <li><a href=""> obj4</a></li>
        <li><a href=""> obj5</a></li>
        <div style="clear: both;"></div>
    </ul>
</nav>
akaManen
  • 27
  • 6

3 Answers3

0

You can simply do a display: flex and flex-direction: row to your ul and it will work

<nav style="margin: 0; padding: 0; text-align: center;">
    <ul style="list-style: none; display: flex; flex-direction: row">
        <li><a href=""> obj1</a></li>
        <li><a href=""> obj2</a></li>
        <li><a href=""> obj3</a></li>
        <li><a href=""> obj4</a></li>
        <li><a href=""> obj5</a></li>
        <div style="clear: both;"></div>
    </ul>
</nav>
bhattaraijay05
  • 442
  • 1
  • 5
  • 14
  • I tried and the items get displayed horizontally, but they aren't centered anymore and don't have spaces between them. – akaManen May 19 '21 at 15:06
0

You can have your list items displayed horizontally by applying display: inline to your list items directly. Here's the CSS for it:

li {
    display: inline;
}
Andrew
  • 307
  • 7
  • 13
0

Change display: inline; to display: inline-flex;

E.Tabaku
  • 116
  • 8