如何不包装div的内容？

我有一个固定宽度，里面div有两个按钮。如果按钮的标签太长，则它们会缠绕-一个按钮停留在第一行，而下一个按钮紧随其后而不是与其相邻。

如何强制将div其展开，以使两个按钮都在一行上？

尝试white-space: nowrap;。。。

两者的结合float: left; white-space: nowrap;对我有用。

他们每个人独立地没有达到期望的结果。

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

没必要玩弄max-width，max-height，white-space，或其他任何东西。

希望能对某人有所帮助。

如果您不在乎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>

如果您的div具有固定宽度，则不应扩展，因为您已经固定了其宽度。但是，现代浏览器支持min-widthCSS属性。

您可以通过使用CSS表达式或使用自动宽度并在容器中具有spacer对象的方式，在旧版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>

强制按钮停留在同一行将使它们超出它们所在的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。

祝好运！