防止 </div > 之后的换行

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

举个例子

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

and want it to display like:

我的标签: 我的短信

208349 次浏览
小开

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

.label {
clear:none;
}
小开

尝试浮动你的 div 在 CSS 中

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

缺省情况下，DIV 是 BLOCK 显示元素，这意味着它位于自己的行上。如果您添加 CSS 属性 display: inline，它将按照您希望的方式运行。但是，也许您应该考虑使用 SPAN？

小开
最佳答案

display:inline;

或者

float:left;

或者

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

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

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

display:inline; will turn the div into the equivalent of a 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规则，正如对于块元素所期望的那样。但是，为了将其放置在其他元素中，它被视为内联元素。

更多信息请阅读此 。

小开 
.label, .text {display: inline}

不过如果使用它，也可以将 div 改为 span。

小开

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

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

.label, .text { display: inline; }

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

另一种方法是浮动元素:

.label, .text { float: left; }

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

You can also consider changing the elements. The div element is intended for document divisions, I usually use a label and a span element for a construct like this:

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

Div 用来给一个网站赋予结构或者包含很多文本或元素，但是你似乎用它们作为标签，你应该使用 span，它会自动把两个文本放在一起，你不需要为它写 css 代码。

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

小开

我已经多次成功地获得了没有换行符的 div，方法是使用 float css 属性和 width css 属性。
当然，在制定出解决方案之后，你必须在所有浏览器中测试它，在每个浏览器中，你必须重新调整窗口大小，以确保它在所有情况下都能工作。

小开

对普通 div 使用此代码 display: inline;

如果在表中使用此代码，请使用此代码 display: inline-table; 比桌子好

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

我好像没见过这个版本:

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

为了防止 div文本中出现断行，请尝试以下方法(在 CSS中) :

white-space: nowrap;
小开

显示: 行内块为我工作


提交答案