如何擠壓一行中的按鈕？

Question

我在<div>中有幾個按鈕。如何在<div>長度超過100％時壓縮按鈕;我的意思是避免第二行？

類似scaleX，但取決於所有可用按鈕的寬度。

示例代碼：

<div class="something"> 
    <button>some text</button> 
    <button>some other text</button> 
    <button>another example</button> 
</div> 

例子： http://jsfiddle.net/BRNKt/ 我要讓密集的按鈕（文本字體），以確保所有按鈕的線;但符合原始div寬度。

Answer 1

通過添加button { padding: 0 }可以使渲染更加緊湊。您可以通過添加.something { word-spacing: -0.3em }; button { word-spacing: 0 }來稍微調整一下。

但我不明白如何使字體大小取決於可用寬度，這似乎意味着什麼。 （而且很容易導致嚴重的問題accessibily;此外，許多瀏覽器不會讓你減少下面的一些瀏覽器的depedent限制字體大小。）

如果你能接受換行符內按鈕，即有一個按鈕在兩行文字，你可以「強制」按鈕的方式，使文字環繞在他們可以接受的寬度，而不是四溢：

button { padding: 0; max-width: 14%; float: left; } 

然而，在這種情況下，它可能會更好要插入強制換行按鈕，例如

<button>some<br>text</button> 
<button>some<br>other<br>text</button> 

Answer 2

.something, 
.something button { 
    white-space: nowrap; 
}