Як не загортати вміст дива?

244

У мене фіксована ширина divз двома кнопками. Якщо мітки кнопок занадто довгі, вони загортаються - одна кнопка залишається на першому рядку, а наступна кнопка слідує під нею, а не поруч із нею.

Як я можу змусити divрозгорнути так, щоб обидві кнопки знаходилися на одній лінії?

html css

— JamesBrownIsDead
джерело

Я навіть не можу увійти в систему зі своїм OpenID до doctype, тому я думаю, що найкраще тут належить питання.

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

3

@nicholaides Я погоджуюся, що це буде працювати над доктіптом, але я думаю, що це повністю законно і для SO.

— ТМ.

454

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

— Марек Карбарц
джерело

6

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

— Walter Roman

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 розширювався по всьому контейнерові, ви можете запускати його зліва за допомогою стандартного розширення, щоб підтримувати його вміст, наприклад:

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

Ви можете емулювати властивість мінімальної ширини у старих браузерах 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 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кордону.

Удачі!

— Зоїд
джерело