html - 有div "tight fit"

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>

我有三个 div，它们都包含 2 个没有太多文本的 span。我希望所有三个 div 出现在同一行上。目前，每个 div 占据一个新行的整个宽度。

我不想硬编码宽度。我更希望 div 表现得像 span，因为它们的内容“紧密配合”(没有空格)。

Answer 1

我不知道为什么每个人都在说float:left或 display:inline-block;当您说您希望 div 表现得像一个 span 时。正确的做法是:

div {
    display: inline;
}

忽略任何这样说的人:

"If you want it to look like a span, use a span tag"

这不是真的，这就是 CSS 的用途 - 描述内容应该看起来，HTML 是用来描述内容是什么。

我相信您有选择标签的理由，并且可能有更好的标签可供选择，但如果没有任何实际上下文就不可能说出来。然而<div>和 <span>没有实际语义。