html - 强制div在同一行

Question

我正在尝试制作一个带有文本的 div 和一个带有按钮的 div 并排放置。它工作正常，直到你把屏幕变窄。有没有办法强制它们在同一行上，并让第一个 div 缩小以适应第二个的 min-width？

http://jsfiddle.net/C3877/9/

为了明白我的意思，调整窗口大小，减小宽度，直到带有按钮的 div 被强制到第二行。这就是我想要阻止的。

注意:我只关心建议的修复是否在 Chrome 中正常工作。

Answer 1

您可以使用 display: inline-block 而不是 float 。这将使所有内容保持在一行中，并且也遵守 min-width。

内联 block fiddle :http://jsfiddle.net/C3877/8/

此外，由于您只关心 Chrome，您可以查看 flexible boxes

这里有一个(快速)flex fiddle :http://jsfiddle.net/C3877/11/