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

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

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

Ответы

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

Если ваш 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>

Ответ 6

Принуждение кнопок в одной строке приведет к тому, что они выйдут за пределы фиксированной ширины 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>

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

Удачи!