Как сжать кнопки в линию?

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 }.

Но я не понимаю, как вы могли бы сделать размер шрифта зависимым от доступной ширины, что, похоже, и означает. (И это может легко привести к серьезным проблемам с доступом. Кроме того, многие браузеры не позволяют уменьшить размер шрифта ниже некоторого ограничения, зависящего от браузера.)

Если вы можете принять разрывы строк внутри кнопок, то есть иметь текст кнопки в две строки, вы можете «принудительно» принудительно установить нужную ширину кнопок таким образом, чтобы текст переносился в них, вместо перетекание:

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;
}