Html </div> 后防止换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3576605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent linebreak after </div>
提问by Fabiano
Is there a way to prevent a line break after a div with css?
有没有办法在使用 css 的 div 后防止换行？
For example I have
例如我有
<div class="label">My Label:</div>
<div class="text">My text</div>
and want it to display like:
并希望它显示如下：
My Label: My text
我的标签：我的文字
回答by Jeff Rupert
display:inline;
display:inline;
OR
或者
float:left;
float:left;
OR
或者
display:inline-block;-- Might not work on all browsers.
display:inline-block;-- 可能不适用于所有浏览器。
What is the purpose of using a divhere? I'd suggest a span, as it is an inline-level element, whereas a divis a block-level element.
div在这里使用 a 的目的是什么？我建议使用 a span，因为它是内联级元素，而 adiv是块级元素。
Do note that each option above will work differently.
请注意，上述每个选项的工作方式都不同。
display:inline;will turn the divinto the equivalent of a span. It will be unaffected by margin-top, margin-bottom, padding-top, padding-bottom, height, etc.
display:inline;将变成div相当于 a span。这将是不受影响margin-top，margin-bottom，padding-top，padding-bottom，height，等。
float:left;keeps the divas a block-level element. It will still take up space as if it were a block, however the width will be fitted to the content (assuming width:auto;). It can require a clear:left;for certain effects.
float:left;将 保持div为块级元素。它仍然会像块一样占用空间，但是宽度将适合内容（假设width:auto;）。它可能需要clear:left;某些效果。
display:inline-block;is the "best of both worlds" option. The divis treated as a block element. It responds to all of the margin, padding, and heightrules as expected for a block element. However, it is treated as an inline element for the purpose of placement within other elements.
display:inline-block;是“两全其美”的选择。将div被视为一个块元件。它响应所有的margin，padding和height人们所期待的块级元素的规则。但是，为了放置在其他元素中，它被视为内联元素。
Read thisfor more information.
阅读本文了解更多信息。
回答by mikemerce
.label, .text {display: inline}
Although if you use that, you might as well change the div's to span's.
尽管如果您使用它，您也可以将 div 更改为 span。
回答by David M
A DIV is by default a BLOCK display element, meaning it sits on its own line. If you add the CSS property display:inline it will behave the way you want. But perhaps you should be considering a SPAN instead?
默认情况下，DIV 是 BLOCK 显示元素，这意味着它位于自己的行上。如果您添加 CSS 属性 display:inline，它将按照您想要的方式运行。但也许您应该考虑使用 SPAN 来代替？
回答by Mike
<span class="label">My Label:</span>
<span class="text">My text</span>
回答by Guffa
The divelements are block elements, so by default they take upp the full available width.
这些div元素是块元素，因此默认情况下它们占用全部可用宽度。
One way is to turn them into inline elements:
一种方法是将它们变成内联元素：
.label, .text { display: inline; }
This will have the same effect as using spanelements instead of divelements.
这将与使用span元素而不是div元素具有相同的效果。
Another way is to float the elements:
另一种方法是浮动元素：
.label, .text { float: left; }
This will change how the width of the elements is decided, so that thwy will only be as wide as their content. It will also make the elements float beside each other, similar to how images flow beside each other.
这将改变元素宽度的决定方式，因此 thwy 将只与它们的内容一样宽。它还将使元素并排浮动，类似于图像如何并排流动。
You can also consider changing the elements. The divelement is intended for document divisions, I usually use a labeland a spanelement for a construct like this:
您还可以考虑更改元素。该div元素用于文档划分，我通常使用 alabel和 aspan元素来构建这样的结构：
<label>My Label:</label>
<span>My text</span>
回答by Christophe
div's are used to give structure to a website or to contain a lot of text or elements, but you seem to use them as label, you should use span, it will put both text next to eachother automatically and you won't need to wright css code for it.
div 用于为网站提供结构或包含大量文本或元素，但您似乎将它们用作标签，您应该使用跨度，它会自动将两个文本放在一起，您无需编写css 代码。
And even if other people tell you to float the elements it's best that you just change the tags.
即使其他人告诉您浮动元素，最好只更改标签。
回答by Maxhirez
I don't think I've seen this version:
我想我没看过这个版本：
<div class="label">My Label:<span class="text">My text</span></div>
回答by Hassaan
<div id="hassaan">
<div class="label">My Label:</div>
<div class="text">My text</div>
</div>
CSS:
CSS：
#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}
回答by theycallmemorty
Try applying the clear:nonecss attribute to the label.
尝试将clear:nonecss 属性应用于标签。
.label {
clear:none;
}
回答by Tim
try float your div's in css
尝试在 css 中浮动你的 div
.label {
float:left;
width:200px;
}
.text {
float:left;
}
