У меня есть фиксированная ширина div
с двумя кнопками. Если метки кнопок слишком длинные, они переносятся - одна кнопка остается на первой строке, а следующая кнопка следует за ней, а не рядом с ней.
Как я могу заставить div
расширяться так, чтобы обе кнопки были на одной строке?
Ответы:
Попробуй
white-space: nowrap;
. , ,источник
white-space
, этоnowrap
значение поддерживается в IE 6+, хотя другие значения - только IE 8+Комбинация обоих
float: left;
white-space: nowrap;
работала для меня.Каждый из них самостоятельно не достиг желаемого результата.
источник
Я не знаю причины этого, но я установил для родительского контейнера значение для
display:flex
дочерних контейнеров,display:inline-block
и они остались встроенными, несмотря на общую ширину дочерних элементов, превышающую родительскую.Не нужно играть с
max-width
,max-height
,white-space
или что - нибудь еще.Надеюсь, это поможет кому-то.
источник
display: flex
. Больше ничего не нужноЕсли вам не нужна минимальная ширина для div и вы действительно не хотите, чтобы div расширялся по всему контейнеру, вы можете перемещать его влево - плавающие div по умолчанию расширяются для поддержки их содержимого, например:
источник
Если ваш div имеет фиксированную ширину, он не должен расширяться, потому что вы зафиксировали его ширину. Однако современные браузеры поддерживают
min-width
свойство CSS.Вы можете эмулировать свойство min-width в старых браузерах IE с помощью выражений CSS или с помощью автоматической ширины и наличия в контейнере объекта-спейсера. Это решение не элегантно, но может помочь:
источник
Если заставить кнопки оставаться в одной строке, они выйдут за пределы фиксированной ширины div, в котором они находятся. Если вы согласны с этим, тогда вы можете сделать еще один div внутри уже существующего div. Новый div, в свою очередь, будет удерживать кнопки и иметь фиксированную ширину, но столько места, сколько нужно двум кнопкам в одной строке.
Вот пример:
Возможно, вы захотите рассмотреть свойство переполнения для фрагмента содержимого за пределами
parentDiv
границы.Удачи!
источник