How to make a <ul> display in a horizontal row
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.
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.
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;
}
Here is the working example:
#div_top_hypers {
background-color:#eeeeee;
display:inline;
}
#ul_top_hypers li{
display: inline;
}
<div id="div_top_hypers">
<ul id="ul_top_hypers">
<li>‣ <a href="" class="a_top_hypers"> Inbox</a></li>
<li>‣ <a href="" class="a_top_hypers"> Compose</a></li>
<li>‣ <a href="" class="a_top_hypers"> Reports</a></li>
<li>‣ <a href="" class="a_top_hypers"> Preferences</a></li>
<li>‣ <a href="" class="a_top_hypers"> logout</a></li>
</ul>
</div>