Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SPAN next to each other WITHOUT float

Tags:

html

css

How would you get three span's to sit side by side instead of going to the next line without using float in CSS? so I need all three of these to appear next to each other..or if there is another method without using float. THanks!

<span style="display:block; width:33%;">Test1</span>
<span style="display:block; width:33%;">Test2</span>
<span style="display:block; width:33%;">Test2</span>
like image 788
Matt Avatar asked Apr 01 '11 00:04

Matt


People also ask

How do I put two spans side by side?

The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.

Can you do a span within a span?

Yes. You can have a span within a span .

Can a span have padding?

span won't have padding because it is an inline element by default, so set inline-block or block.


2 Answers

display: inline-block; or their natural (default) display of inline.. though you can give the inline-block a width and height

like image 104
clairesuzy Avatar answered Sep 19 '22 14:09

clairesuzy


Try display: inline-block; instead.

like image 42
drudge Avatar answered Sep 18 '22 14:09

drudge