CSS：不要包装div的内容
我有一个固定宽度的div，里面有两个button。 如果button的标签太长，则它们会自动换行 – 一个button位于第一行，而下一个button位于其下方，而不是靠近它。
如何强制div展开，使两个button都在一行？
尝试white-space:nowrap;
两个float: left; white-space: nowrap; 为我工作。
他们每个人都没有达到预期的效果。
如果你不关心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-width CSS属性。
您可以通过使用CSSexpression式或使用自动宽度并在容器中具有间隔对象来在旧IE浏览器中模拟最小宽度属性。 这个解决scheme不是优雅的，但可能会诀窍：
<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>
强制button保持在同一行将使他们超出他们所在的div的固定宽度。如果你没有问题，那么你可以在你已经有的div里面再创build一个div。 新的div反过来将保持button，并有两个button需要保持在一个行，无论多less空间的固定宽度。
这里是一个例子：
<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边框之外的内容块的溢出属性。
祝你好运！
