我有一个固定宽度的div与两个按钮在它。如果按钮的标签太长,它们就会自动换行——一个按钮保持在第一行,下一个按钮在它下面,而不是在它旁边。
我如何才能迫使div展开,使两个按钮都在一行?
我有一个固定宽度的div与两个按钮在它。如果按钮的标签太长,它们就会自动换行——一个按钮保持在第一行,下一个按钮在它下面,而不是在它旁边。
我如何才能迫使div展开,使两个按钮都在一行?
当前回答
两者的组合:左;空白: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>
两者的组合:左;空白: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属性。
好运!