Как не обернуть содержимое div?

244

У меня есть фиксированная ширина divс двумя кнопками. Если метки кнопок слишком длинные, они переносятся - одна кнопка остается на первой строке, а следующая кнопка следует за ней, а не рядом с ней.

Как я могу заставить divрасширяться так, чтобы обе кнопки были на одной строке?

html css

— JamesBrownIsDead
источник

Я даже не могу войти с моим OpenID в doctype, поэтому мне кажется, что вопрос лучше всего здесь.

— Стефан Кендалл

3

@nicholaides Я согласен, что это сработает на doctype, но я думаю, что и на SO это вполне законно.

— ТМ.

454

Попробуй white-space: nowrap;. , ,

— Марек Карбарз
источник

6

К вашему сведению: согласно документам MDNwhite-space , это nowrapзначение поддерживается в IE 6+, хотя другие значения - только IE 8+

— Уолтер Роман

73

Комбинация обоих float: left; white-space: nowrap;работала для меня.

Каждый из них самостоятельно не достиг желаемого результата.

— Крис Нолет
источник

7

Я не знаю причины этого, но я установил для родительского контейнера значение для display:flexдочерних контейнеров, display:inline-blockи они остались встроенными, несмотря на общую ширину дочерних элементов, превышающую родительскую.

Не нужно играть с max-width, max-height, white-spaceили что - нибудь еще.

Надеюсь, это поможет кому-то.

— elPastor
источник

1

Это сработало для меня, когда другие подходы, перечисленные выше, не сработали. Все что мне нужно было display: flex. Больше ничего не нужно

— HerrimanCoder

4

Если вам не нужна минимальная ширина для div и вы действительно не хотите, чтобы div расширялся по всему контейнеру, вы можете перемещать его влево - плавающие div по умолчанию расширяются для поддержки их содержимого, например:

<form>
    <div style="float: left; background-color: blue">
        <input type="button" name="blah" value="lots and lots of characters"/>
        <input type="button" name="blah2" value="some characters"/>
    </div>
</form>

— Николас Беккер
источник

0

Если ваш div имеет фиксированную ширину, он не должен расширяться, потому что вы зафиксировали его ширину. Однако современные браузеры поддерживают min-widthсвойство CSS.

Вы можете эмулировать свойство min-width в старых браузерах IE с помощью выражений CSS или с помощью автоматической ширины и наличия в контейнере объекта-спейсера. Это решение не элегантно, но может помочь:

<div id="container" style="float: left">
  <div id="spacer" style="height: 1px; width: 300px"></div>
  <button>Button 1 text</button>
  <button>Button 2 text</button>
</div>

— Мистер Блестящий и Новый 安宇
источник

-2

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

Вот пример:

<div id="parentDiv" style="width: [less-than-what-buttons-need]px;">
    <div id="holdsButtons" style="width: [>=-than-buttons-need]px;">
       <button id="button1">1</button>
       <button id="button2">2</button>
    </div>
</div>

Возможно, вы захотите рассмотреть свойство переполнения для фрагмента содержимого за пределами parentDivграницы.

Удачи!

— Zoid
источник