有div"紧身"

Question

这是我的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>

我有三个divs,其中包含2 spans,文本不多.我想让所有三个人div出现在同一条线上.目前,每个都div占据了新线的整个宽度.

我不想硬编码宽度.我更倾向于,如果s在某种意义上div表现得像spans,那么它们的内容(没有空白)就会"紧密贴合".

Answer 1

我不知道为什么每个人都在说float:left或display:inline-block;当你说你希望div表现得像一个跨度.这样做的正确方法是:

div {
    display: inline;
}

忽略任何人这样说:

"如果你想让它看起来像一个跨度,请使用span标签"

这不是真的,这就是CSS的用途 - 描述内容应该是什么样的,HTML用于描述内容是什么.

我确定你有选择标签的理由,并且可能有更好的选择,但没有任何实际情况就不可能说出来.但是<div>并<span>没有实际的语义含义.

Answer 2

最简单的方法是将floatleft 应用到 ，div以便它们位于直线上。或者，您可以申请display:inline-block，div但这仅适用于 IE8+。

但我必须问一个问题，为什么div一开始需要标签？看来你在这里为自己创造了更多的工作。

我更愿意从内联元素（例如 a ）开始span，然后display:inline-block根据需要应用填充、边距。