How to display <span> and <ul> inline within a <div>

Question

I want the following code to display only 1 line of text. How can I get rid of the gap between range and ul?

<div id="twitter_div"> <span class="talenthouse">@twittername: </span> <ul id="twitter_update_list"> </ul> </div> 

With the following CSS:

 *{ margin: 0; padding: 0; } #twitter_div{ font-family:"lucida grande",tahoma,arial,sans-serif; color: #999999; font-size: 71%; background: url(images/twitter_bg.gif) top left no-repeat; width: 965px; height: 48px; overflow: auto; padding: 15px 0 0 85px; } .talenthouse{ font-family: "Helvetica Neue", "lucida grande",tahoma,arial,sans-serif; color: #80c242; font-weight: bold; font-size: 135%; display: inline; } ul#twitter_update_list{ list-style: none; width: 780px; height: 15px; display: inline; } 

Answer 1

Try this CSS.

 <style type="text/css"> ul, li, ol{display:inline} </style> 

Answer 2

Short answer: put this in your CSS.

 ul#twitter_update_list, ul#twitter_update_list li { display: inline; } 

Answer 3

Try using a reset sheet to remove all pads / fields from elements. Google for "eric meyer reset sheet".

Then put the contents in the list to display: inline;

Answer 4

You can set CSS to display the inline UL string. This will also remove the dots.

  #twitter_div li { display: inline; } 

thanks

Andy

Answer 5

I believe this should work:

 #twitter_div span { float: left; } #twitter_update_list { float: left; margin: 0; } 

EDIT: I just added a marker: 0, which takes the list to the same level as the range.