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

不需要玩弄最大宽度，最大高度，空白，或其他任何东西。

希望这能帮助到别人。

两者的组合:左;空白:nowrap;}为我工作。

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

试试white-space: nowrap;

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

如果你的div有固定宽度，它不应该展开，因为你已经固定了它的宽度。但是，现代浏览器支持最小宽度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。新的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边界外的内容块考虑overflow属性。

好运！

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