Question

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

例如我有

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

并希望它显示为：

我的标签：我的文字

Answer 1

display:inline;

OR

float:left;

OR

display:inline-block; - 可能无法在所有浏览器上使用。

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

请注意，上面的每个选项都会有不同的效果。

display:inline;会将div变为等同于span。它不受margin-top，margin-bottom，padding-top，padding-bottom，height等的影响。

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

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

Read this了解更多信息。

Answer 2

.label, .text {display: inline}

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

Answer 3

默认情况下，DIV是BLOCK显示元素，这意味着它位于自己的行上。如果添加CSS属性display：inline，它将按您希望的方式运行。但也许你应该考虑一个SPAN呢？

Answer 4

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

Answer 5

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

一种方法是将它们变成内联元素：

.label, .text { display: inline; }

这与使用span元素而不是div元素具有相同的效果。

另一种方法是浮动元素：

.label, .text { float: left; }

这将改变元素宽度的确定方式，因此thwy只会与其内容一样宽。它还会使元素彼此浮动，类似于图像彼此相邻的方式。

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

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

Answer 6

div用于为网站提供结构或包含大量文本或元素，但您似乎将它们用作标签，您应该使用span，它会将两个文本自动放在彼此旁边而您不会需要为它编写css代码。

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

Answer 7

<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;}

Answer 8

我认为我没看过这个版本：

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

Answer 9

尝试将clear:none css属性应用于标签。

.label {
     clear:none;
}

Answer 10

尝试在css中浮动你的div

.label {
float:left;
width:200px;
}
.text {
float:left;
}

Answer 11

通过使用float css属性和width css属性，我有很多次成功获得没有换行符的div。当然，在制定解决方案之后，您必须在所有浏览器中对其进行测试，并且在每个浏览器中，您必须重新调整窗口大小以确保它在所有情况下都能正常工作。

Answer 12

将此代码用于普通div display: inline;

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

更好

Answer 13

（在CSS中尝试执行此操作，以防止div文本中出现换行符：

white-space: nowrap;