Отображение кнопки: встроенный не разрывает строку
Я хочу, чтобы мои кнопки отображались встроенными и разрывали строку внутри них, как промежутки
Смотрите скрипку: https://jsfiddle.net/ojkvdyfL/
.container{
width:400px;
}
.subcontainer{
display: inline;
}
button{
display: inline;
all:unset;
}<div class = "container">
<p>1st example with buttons</p>
<div class = "subcontainer">
<button> This is a short text in buttons </button>
<button>with a longer text next to it because we need it so it takes mutliple lines to illustrate this issue</button>
</div>
<p>2nd example with spans</p>
<div class = "subcontainer">
<span>This is a short text in spans </span>
<span>with a longer text next to it becaufdsse we need it so it takes mutliple lines to illustrate this issue</span>
</div>
</div>Я не понимаю, почему пример с кнопкой не работает, как с промежутком...
Встроенная спецификация гласит: «В обычном потоке следующий элемент будет на той же строке, если есть место».
Любая идея, почему это не работает? Существует ли решение CSS? Или мне нужно использовать интервалы с role="button"?
Я отредактировал, чтобы сделать его более понятным (ширина все равно была проигнорирована из-за встроенного кода)
@RokoC.Buljan RokoC.Buljan Разве вы не видите, что оба примера отображаются по-разному, несмотря на то, что единственная разница в том, что кнопка заменена на диапазон? Может быть, вы знаете, почему кнопка с полным сбросом css и display: inline не действует как диапазон? (Я удалил !important, чтобы избежать дебатов по этому поводу...)
@user1372445 user1372445 извините, я полностью пропустил проблему на мобильном телефоне. Я вижу сейчас
Ответы 1
Спецификация HTML5 не позволяет отображать кнопку таким образом, говорится в Макет кнопки.
... если вычисленное значение 'display' является таким значением, что внешний тип дисплея является 'inline', то ведет себя как 'inline-block'».
это сделано для обратной совместимости со днями, когда рендеринг кнопок был делегирован функции O/S.
Интересно, спасибо за этот ответ. Я думаю, мне нужно будет использовать промежутки на данный момент;)
Фактически, вы используете диапазон с шириной, а кнопка имеет полную ширину по умолчанию.