How can I make my list items appear horizontally in a row using CSS?
#div_top_hypers {_x000D_
background-color:#eeeeee;_x000D_
display:inline; _x000D_
}_x000D_
#ul_top_hypers {_x000D_
display: inline;_x000D_
}<div id="div_top_hypers">_x000D_
<ul id="ul_top_hypers">_x000D_
<li>‣ <a href="" class="a_top_hypers"> Inbox</a></li>_x000D_
<li>‣ <a href="" class="a_top_hypers"> Compose</a></li>_x000D_
<li>‣ <a href="" class="a_top_hypers"> Reports</a></li>_x000D_
<li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>_x000D_
<li>‣ <a href="" class="a_top_hypers"> logout</a></li>_x000D_
</ul>_x000D_
</div>This question is related to
html
css
html-lists
It will work for you:
#ul_top_hypers li {
display: inline-block;
}
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;
}
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.
#ul_top_hypers li {
display: flex;
}
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.
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 {_x000D_
background-color:#eeeeee;_x000D_
display:inline; _x000D_
}_x000D_
#ul_top_hypers {_x000D_
display: flex;_x000D_
justify-content:space-around;_x000D_
list-style-type:none;_x000D_
}<div id="div_top_hypers">_x000D_
<ul id="ul_top_hypers">_x000D_
<li>‣ <a href="" class="a_top_hypers"> Inbox</a></li>_x000D_
<li>‣ <a href="" class="a_top_hypers"> Compose</a></li>_x000D_
<li>‣ <a href="" class="a_top_hypers"> Reports</a></li>_x000D_
<li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>_x000D_
<li>‣ <a href="" class="a_top_hypers"> logout</a></li>_x000D_
</ul>_x000D_
</div>Source: Stackoverflow.com