39

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
SUN Jiangong
  • 5,242
  • 16
  • 57
  • 76
  • 6
    spans are `inline` elements anyway, you shouldn't have to do anything with them at all. – Andy E Dec 23 '10 at 17:23
  • 2
    @garcon1986, Is it possible you have some style somewhere that's overriding the normal behaviour of the spans? At times like this, I try using the !important rule to see if I can force things to work - It helps determine the source of the issue. (as in display:inline !important;) – Steve Adams Dec 23 '10 at 17:44

8 Answers8

51

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>
Om Sao
  • 7,064
  • 2
  • 47
  • 61
Pradeep Singh
  • 3,582
  • 3
  • 29
  • 42
8

The float will mess things up. Usually with a float to work you need a width with it as well. It can't float them against each other because it doesn't know how much space each span will occupy in relation to the div. Spans are inherently inline elements unless you define them otherwise, so they should just display that way without the float.

jbwharris
  • 710
  • 1
  • 10
  • 30
6

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

'display:contents' Makes the container disappear, making the child elements children of the element the next level up in the DOM which I believe is the right answer.

Another way which works on ie too is this:

<div style="float:left; display:flex;">
    <span style="color: red;">First Span</span>
    <span style="color: blue;">Second Span</span>
</div>
Manudeep
  • 329
  • 3
  • 8
3

It's the float left that is causing it to be on separate lines. Maybe try a &nbsp; (non breaking space) in between the spans.

Samuel
  • 16,923
  • 6
  • 62
  • 75
3

In some cases display:inline does not work, in such case try adding both spans in one parent span like below

<span>
  <span id="span1">Span 1</span>
  <span id="span2">Span 2</span>
</span>
Yuvraj Patil
  • 7,944
  • 5
  • 56
  • 56
1

Overflow maybe?

<div style="width:60px; overflow:hidden;">

haha
  • 1,522
  • 2
  • 15
  • 18
  • 1
    @OP has been set `float:left` to the span. to make it to be in one line put overflow hidden to the div. – haha Dec 23 '10 at 17:28
1

The float and display styles are mutually exclusive, so there's no point using them together. Also <span> defaults to display:inline; so that's redundant anyway (unless you have some other style elsewhere setting them to something else?).

Spudley
  • 166,037
  • 39
  • 233
  • 307
1
You can use Table.
    
<table>
    <tbody>
        <tr>
            <td><span>Span 1 text</span></td>
            <td><span>Span 2 text</span></td>
        </tr>
        <tr>
            <td><span>Span 3 text</span></td>
            <td><span>Span 4 text</span></td>
        </tr>
    </tbody>
</table>
Amar Husain
  • 69
  • 5
  • 1
    Using a table as styling/layout element is discouraged, see [here](https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html). – ahuemmer Jul 19 '22 at 08:24