How to wrap two spans into one line with CSS

css line html
SUN Jiangong picture SUN Jiangong · Dec 23, 2010 · Viewed 91.4k times · Source

I want to wrap two spans in one line with CSS.

Here is my code: 

<div style="width:60px;">
    <span id="span1" style="float:left; display:inline;"></span>
    <span id="span2" style="float:left; display:inline; "></span>
</div>

But it doesn't work.

How to do that?

Edit:

I want to use the "id", either use div or span, I just want them to be in one line.

When I just use span without style, the content are not in the same line. The second line will go down.

Answer

Pradeep Singh picture Pradeep Singh · Dec 23, 2010

Here is the working example:

<div style="float:left;">
    <span style="display:inline; color: red;">First Span</span>
    <span style="display:inline; color: blue;">Second Span</span>
</div>

Related questions

How do you make div elements display inline?

Given this HTML: <div>foo</div><div>bar</div><div>baz</div> How do you make them display inline like this: foo bar baz not like this: foo …

Read More
Add centered text to the middle of a <hr/>-like line

I'm wondering what options one has in xhtml 1.0 strict to create a line on both sides of text like-so: Section one ----------------------- Next section ----------------------- Section two I've thought of doing some fancy things like this: <div style="float:…

Read More
Set line spacing

How can I set line spacing with CSS, like we can set it in MS Word?

Read More