Question

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

如何强制div展开，以便两个按钮都在一行？

Answer 1

尝试white-space:nowrap;

Answer 2

float: left; white-space: nowrap;的组合对我有用。

他们每个人都独立地没有达到预期的效果。

Answer 3

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

不需要玩max-width，max-height，white-space或任何其他内容。

希望能有所帮助。

Answer 4

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

Answer 5

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

您可以使用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>

Answer 6

强制按钮保持在同一行将使它们超出它们所处的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的内容？

6 个答案: