http://jsfiddle.net/jrXwf/5/
To achieve the desired behavior, consider adding display: inline-block
to your unordered list or any other element you wish to behave in that way. Another option is to float the element, but using inline-block likely best represents the intended outcome with minimal effort. The goal is to display the element inline while having it act like a block element within its display box (hence why inline-block
is preferred over inline
).
It might be beneficial to adjust your overall markup structure. As mentioned by others, nesting a SPAN
inside a UL
is not valid. Additionally, your current structure appears to be quite complex and could potentially be simplified by using fewer elements.