Html 如何不包装 div 的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1703183/
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
How to not wrap contents of a div?
提问by JamesBrownIsDead
I've got a fixed-width divwith two buttons in it. If the labels of the buttons are too long, they wrap – one button stays on the first line, and the next button follows underneath it instead of adjacent to it.
我有一个div带有两个按钮的固定宽度。如果按钮的标签太长，它们会换行——一个按钮保留在第一行，下一个按钮紧随其后而不是相邻。
How can I force the divto expand so that both buttons are on one line?
如何强制div展开以使两个按钮都在一行上？
回答by Marek Karbarz
Try white-space: nowrap;. . .
试试white-space: nowrap;。. .
回答by Chris Nolet
A combination of both float: left;white-space: nowrap;worked for me.
两者的结合float: left;white-space: nowrap;对我有用。
Each of them independently didn't accomplish the desired result.
他们每个人都没有独立完成预期的结果。
回答by elPastor
I don't know the reasoning behind this, but I set my parent container to display:flexand the child containers to display:inline-blockand they stayed inline despite the combined width of the children exceeding the parent.
我不知道这背后的原因，但是我将我的父容器设置为display:flex和子容器display:inline-block并且它们保持内联，尽管子项的总宽度超过了父项。
Didn't need to toy with max-width, max-height, white-space, or anything else.
没必要玩弄max-width，max-height，white-space，或其他任何东西。
Hope that helps someone.
希望能帮助某人。
回答by Nicholas Becker
If you don't care about a minimum width for the div and really just don't want the div to expand across the whole container, you can float it left -- floated divs by default expand to support their contents, like so:
如果您不关心 div 的最小宽度，并且真的只是不想让 div 扩展到整个容器，则可以将其向左浮动——默认情况下浮动 div 会扩展以支持其内容，如下所示：
<form>
<div style="float: left; background-color: blue">
<input type="button" name="blah" value="lots and lots of characters"/>
<input type="button" name="blah2" value="some characters"/>
</div>
</form>
回答by u7867
If your div has a fixed-width it shouldn't expand, because you've fixed its width. However, modern browsers support a min-widthCSS property.
如果您的 div 具有固定宽度，则不应展开，因为您已固定其宽度。但是，现代浏览器支持min-widthCSS 属性。
You can emulate the min-width property in old IE browsers by using CSS expressions or by using auto width and having a spacer object in the container. This solution isn't elegant but may do the trick:
您可以通过使用 CSS 表达式或使用自动宽度并在容器中包含一个间隔对象来模拟旧 IE 浏览器中的 min-width 属性。这个解决方案并不优雅，但可以解决问题：
<div id="container" style="float: left">
<div id="spacer" style="height: 1px; width: 300px"></div>
<button>Button 1 text</button>
<button>Button 2 text</button>
</div>
回答by Zoid
Forcing the buttons stay in the same line will make them go beyond the fixed width of the div they are in. If you are okay with that then you can make another div inside the div you already have. The new div in turn will hold the buttons and have the fixed width of however much space the two buttons need to stay in one line.
强制按钮保持在同一行将使它们超出它们所在的 div 的固定宽度。如果你同意，那么你可以在你已经拥有的 div 内创建另一个 div。新的 div 反过来将容纳按钮并具有固定宽度，无论两个按钮需要保持在一行中的多少空间。
Here is an example:
下面是一个例子：
<div id="parentDiv" style="width: [less-than-what-buttons-need]px;">
<div id="holdsButtons" style="width: [>=-than-buttons-need]px;">
<button id="button1">1</button>
<button id="button2">2</button>
</div>
</div>
You may want to consider overflowproperty for the chunk of the content outside of the parentDivborder.
您可能需要考虑边界外内容块的溢出属性parentDiv。
Good luck!
祝你好运！
