This HTML snippet:

<span style="background-color:lightblue">First bit of text!</span>
<span style="background-color:red">Middle text</span>
<span style="background-color:lightgreen;">Second bit of text!</span>

renders like this, with no line breaks between spans:

First bit of text! Middle text Second bit of text!

Now if I change the middle span to contain a UL element:

<span style="background-color:lightblue">First bit of text!</span>
<span style="background-color:red"><ul><li>Middle text 1</li><li>Middle text 2</li></ul></span>
<span style="background-color:lightgreen;">Second bit of text!</span>

Then it renders differently, putting a line break either side of the middle span:

First bit of text!

  • Middle text 1
  • Middle text 2
Second bit of text!

How can I get the UL to appear without linebreaks, sandwiched between the other two spans?

4 answers

This was chosen as the best answer

Maybe this is what you want?

<div style="float:left; background-color:lightblue; width: 30%; display:inline;">First bit of text!</div>
<div style="float:left; background-color:red; width: 30%; display:inline;"><ul><li>Middle text</li><li>Middle text</li><li>Middle text</li></ul></div>
<div style="float:left; background-color:lightgreen; width: 30%; display:inline;">Second bit of text!</div>
Answered over 9 years ago by Tony Crockford
  • Was just in the middle of putting a visual together, but that's exactly what I meant, yes :) Thanks! Luke Halliwell over 9 years ago

First off, you shouldn't use a block level element (the ul) inside inline elements - the span.

you would be better off using divs as containers here.

this will work:

<div style="display:inline;background-color:lightblue">First bit of text!</div>
<ul style="display:inline; margin: 0; padding: 0; background-color:red"><li style="display:inline;margin:0; padding: 0;">Middle text</li></ul>
<div style="display:inline;background-color:lightgreen;">Second bit of text!</div>

but you should move the inline css out into a stylesheet.

Answered over 9 years ago by Tony Crockford
  • This is definitely not what I need. Try adding another LI, with your suggestion the list doesn't appear as normal. I *do* want line breaks between individual list items. Luke Halliwell over 9 years ago
  • do you have a visual of what you need? it's hard to guess. Tony Crockford over 9 years ago

The Problem is that the ul and li elements are block elements, set them as inline elements with "display:inline" and there wont be any linebreak i guess. Floats shouldn't be necessary.

Answered over 9 years ago by Sven Finke

A couple quickies:

  • I recommend avoiding floats if possible.
  • "ul" and "li" elements will display inline if you explicitly give them the "display: inline;" style
  • It is considered poor practice to put block level elements (such as a lis)t inside of an inline level element (such as a span), consider the use of paragraphs instead of spans. Its just as easy to ask a paragraph to display inline as it is a list element.
Answered over 9 years ago by Kevin Jonson
  • what's wrong with floats? in this case sitting three block level elements in a row it's almost the only way (without inline-block) Tony Crockford over 9 years ago