避免在</div>后出现换行。

Question

有没有一种方法可以使用CSS防止在div后出现换行符？

例如，我有以下内容：

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

我想让它显示为：

我的标签：我的文本

- Fabiano

Answer 1

display:inline;

使用display:inline;可以将

元素转换为span元素的等效形式。它不会受到margin-top、margin-bottom、padding-top、padding-bottom、height等属性的影响。

float:left;

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

display:inline-block; -- 在某些浏览器上可能无效。

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

在这里使用

的目的是什么？我建议使用span，因为它是一个内联级别的元素，而

是块级元素。

---

请注意，上述每个选项的使用方式各有不同。

阅读此文获取更多信息。

- Jeff Rupert

---

我使用div标签是因为它们是由模板自动生成的。 - Fabiano

一个带有display:inline属性的div基本上与span相同。它是一个语义上没有意义的容器。唯一的区别是它们的默认显示模式（块级元素 vs 行内元素）。 - Joeri Hendrickx

一个display:inline的div在Safari上不能正常工作，无论如何都会破裂。我正在使用span。 - Gustavo

inline-block 只是有所帮助。谢谢！ - Drey

太棒了，谢谢Jeff。我需要这个是因为一个事件没有被一个<span>触发。"display:inline"也会导致事件失效，"float:left"虽然可以让事件正常工作，但对布局的其他部分有很大的影响，而"display:inline-block"正好满足了我的需求。 - undefined

Answer 2

.label, .text {display: inline}

虽然如果您使用它，最好将div更改为span。

- mikemerce

Answer 3

默认情况下是块级元素，意味着它在自己的行上。如果您添加CSS属性 display: inline ，它将按照您想要的方式运行。但也许您应该考虑使用？

- David M

Answer 4

尝试在CSS中使用以下代码以防止

标签中的文本换行:

white-space: nowrap;

- gustavz

---

忘记了这个属性。它对我很有帮助。 - Arthur Yakovlev

这有什么用？它可以防止标签内的换行。但是 OP 在每个 div 标签后面都有两个 div 标签。而 div 标签默认是块级元素。 - lejahmie

Answer 5

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

- Mike

Answer 6

div元素是块级元素，因此默认情况下它们占用整个可用宽度。

一种方法是将它们转换为内联元素：

.label, .text { display: inline; }

这将产生与使用 div 元素相同的效果。

另一种方法是浮动元素：

.label, .text { float: left; }

这将改变元素宽度的决定方式，使其只能与其内容一样宽。它还会使元素浮动在一起，类似于图像之间的流动。

您还可以考虑更改元素。 div 元素用于文档划分，我通常使用 label 和 span 元素来构建这样的结构：

<label>My Label:</label>
<span>My text</span>

- Guffa

Answer 7

我不认为我见过这个版本：

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

- Maxhirez

Answer 8

元素被用于网站的结构或包含大量文本或元素，但是您似乎将它们用作标签，请改用元素，它会自动将两个文本并排放置，并且您不需要编写CSS代码。

即使其他人告诉您将元素浮动，最好只需更改标签。

- Christophe

Answer 9

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

CSS：

#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}

- Hassaan

---

你可能想要解释一下你的答案，以便于帮助提问者。 - Luca

Answer 10

使用此代码来设置普通的 div display: inline;

如果您在表格中使用它，请使用此代码 display: inline-table; 比 table 更好

- Mo.