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>