防止在 </div> 之后换行

Question

有没有办法防止在带有 css 的 div 之后换行？

例如我有

<div class="label">My Label:</div>
<div class="text">My text</div>

并希望它显示如下：

我的标签：我的文字

原文由 Fabiano 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

display:inline;

或者

float:left;

或者

display:inline-block; -- 可能不适用于所有浏览器。

在这里使用 div 的目的是什么？我建议使用 span ，因为它是内联级元素，而 div 是块级元素。

---

请注意，以上每个选项的工作方式都不同。

display:inline; 将把 div 变成 span 的等价物。 It will be unaffected by margin-top , margin-bottom , padding-top , padding-bottom , height , etc.

float:left; 将 div 保留为块级元素。它仍然会像块一样占用空间，但是宽度将适合内容（假设 width:auto; ）。它可能需要 clear:left; 才能达到某些效果。

display:inline-block; 是“两全其美”的选择。 div 被视为块元素。它响应块元素预期的所有 margin 、 padding 和 height 规则。但是，出于放置在其他元素中的目的，它被视为内联元素。

阅读本文 以获取更多信息。

原文由 Jeff Rupert 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

.label, .text {display: inline}

虽然如果你使用它，你也可以将 div 更改为 span。

原文由 mikemerce 发布，翻译遵循 CC BY-SA 2.5 许可协议