Tutorial :How to make a <ul> display in a horizontal row



Question:

How can I make my list items appear horizontally in a row using CSS?

#div_top_hypers {      background-color:#eeeeee;      display:inline;        }  #ul_top_hypers {      display: inline;  }
<div id="div_top_hypers">      <ul id="ul_top_hypers">          <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>          <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>          <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>          <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>          <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>      </ul>  </div>


Solution:1

List items are normally block elements. Turn them into inline elements via the display property.

In the code you gave, you need to use a context selector to make the display: inline property apply to the list items, instead of the list itself (applying display: inline to the overall list will have no effect):

#ul_top_hypers li {      display: inline;  }  


Solution:2

You could also set them to float to the right.

#ul_top_hypers li {      float: right;  }  

This allows them to still be block level, but will appear on the same line.


Solution:3

Set the display property to inline for the list you want this to apply to. There's a good explanation of displaying lists on A List Apart.


Solution:4

As @alex said, you could float it right, but if you wanted to keep the markup the same, float it to the left!

#ul_top_hypers li {      float: left;  }  


Solution:5

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.

#div_top_hypers {      background-color:#eeeeee;      display:inline;        }  #ul_top_hypers {      display: flex;      justify-content:space-around;      list-style-type:none;  }
<div id="div_top_hypers">      <ul id="ul_top_hypers">          <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>          <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>          <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>          <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>          <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>      </ul>  </div>


Solution:6

It will work for you:

#ul_top_hypers li {      display: inline-block;  }  


Solution:7

#ul_top_hypers li {    display: flex;  }  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »