如何不包装一个div的内容?

小开

尝试white-space: nowrap;

文档:https://developer.mozilla.org/docs/Web/CSS/white-space

小开

如果你的div有固定宽度，它不应该展开，因为你已经固定了它的宽度。然而，现代浏览器支持min-width CSS属性。

你可以在旧的IE浏览器中通过使用CSS表达式或使用auto width并在容器中有一个spacer对象来模拟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>

小开

如果你不关心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>

小开

这两个float: left; white-space: nowrap;的组合适合我。

他们各自都没有达到预期的结果。

小开

强迫按钮保持在同一行将使他们超出固定宽度的div他们所在。如果你觉得没问题，那么你可以在已有的div中创建另一个div。新的div将依次保存按钮，并具有固定的宽度，无论两个按钮需要在一行中保持多大的空间。

这里有一个例子:

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

你可能想要为parentDiv边界外的内容块考虑溢出属性。

好运！

小开

我不知道这背后的原因，但我将父容器设置为display:flex，子容器设置为display:inline-block，尽管子容器的组合宽度超过了父容器，但它们仍然保持内联。

不需要摆弄max-width， max-height， white-space，或其他任何东西。

希望这能帮助到别人。