This is the structure of my HTML:
<div> <span>Some text</span> <br/> <span>Not much text</span> </div>
<div> <span>Some text</span> <br/> <span>Not much text</span> </div>
<div> <span>Some text</span> <br/> <span>Not much text</span> </div>
I have three div
s all of which contain 2 span
s with not much text. I want all three div
s to appear on the same line. At the moment, each div
takes up the whole width of a new line.
I don't want to hardcode a width. I would much prefer if the div
s behaved like span
s in the sense the they have a "tight fit" for their content (no whitespace).
I don't know why everyone is saying float:left
or display:inline-block;
when you said you wanted the div to behave like a span. The correct way to do that is this:
div {
display: inline;
}
"If you want it to look like a span, use a span tag"
It's not true and that's what CSS is for - describing what content should look like, HTML is for describing what the content is.
I'm sure you have your reasons for choice of tags, and there are probably better ones to choose but it's impossible to say without any actual context. However <div>
and <span>
have no actual semantic meaning.
The easiest way would be to apply float
left to the div
so that they sit inline. Or, you could apply display:inline-block
to the div
, but that would only work in IE8+.
But I have to ask the question, why do you need the div
tag initially? it seems like you are creating more work for yourself here.
I would prefer to start with an inline element such as a span
, then apply display:inline-block
for padding, margin's if needed.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With