button - 如何挤压一行中的按钮？

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 }; 进行更多调整。按钮 { word-spacing: 0 } .

但我不明白如何使字体大小取决于可用宽度，这似乎是什么意思。 (这很容易导致严重的可访问性问题。此外，许多浏览器不会让您将字体大小减小到某些浏览器相关限制以下。)

如果您可以在按钮内部接受换行符，即按钮文本分为两行，您可以“强制”按钮达到可接受的宽度，使文本在其中换行，而不是溢出的:

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

但是，在那种情况下，最好在按钮中插入强制换行符，例如

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