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的行为类似{{1}}，因为它们的内容“紧密”（没有空格）。

Answer 1

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

div {
    display: inline;
}

忽略任何人这样说：

＆＃34;如果您希望看起来像那样，请使用span标记＆＃34;

它不是真的，那是CSS的用途 - 描述哪些内容应该看起来像，HTML用于描述内容是

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

Answer 2

最简单的方法是将float左侧应用于div，以便它们内嵌。或者，您可以将display:inline-block应用于div，但这只适用于IE8 +。

但我不得不问这个问题，为什么最初需要div标签？看来你在这里为自己创造了更多的工作。

我更倾向于从内联元素开始，例如span，然后应用display:inline-block进行填充，如果需要则使用边距。

Answer 3

默认情况下，DIV表现为“块级”元素。块级元素通常包含内联元素和其他块级元素。在可视化渲染时，块级元素通常从新行开始。

div {
    display: inline-block;
}

由于存在plenty of tags to choose from，我所遵循的经验法则是，如果您需要一个行为与另一个元素相同的元素，则可能需要更合适的元素选择。

Answer 4

我认为这就是你想要的，

    <div style="float:left;padding:2px;"> <span>Some text</span> <br/> <span>Not much text</span> </div>
    <div style="float:left;padding:2px;"> <span>Some text more text</span> <br/> <span>Not much text</span> </div>
    <div style="float:left;padding:2px;"> <span>Some text more more and more text</span> <br/> <span>Not much text</span> </div>

忽略填充，只是为了获得更好的视图。

有div“紧身”

4 个答案:

忽略任何人这样说：