CSS: Не обертывайте содержимое div

Question

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

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

Answer 1

Попробуйте white-space:nowrap;

Answer 2

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

Вы можете эмулировать свойство 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> 

Answer 3

Если вы не заботитесь о минимальных ширинах для 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> 

Answer 4

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

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

Answer 5

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

Удачи вам!

Answer 6

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

Не нужно было играть с максимальной шириной, максимальной высотой, пробелом или чем-либо еще.

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