Jak nie zawijać zawartości div?

244

Mam stałą szerokość divz dwoma przyciskami. Jeśli etykiety przycisków są zbyt długie, zawijają się - jeden przycisk pozostaje w pierwszym wierszu, a następny przycisk pod nim, zamiast do niego przylegać.

Jak zmusić divdo rozwinięcia, aby oba przyciski znajdowały się w jednej linii?

html css

— JamesBrownIsDead
źródło

Nie mogę nawet zalogować się za pomocą mojego identyfikatora OpenID do doctype, więc wydaje mi się, że pytanie najlepiej tu należy.

— Stefan Kendall

3

@nicholaides Zgadzam się, że to zadziała na doctype, ale myślę, że jest to również całkowicie uzasadnione na SO.

— TM.

454

Spróbować white-space: nowrap;. . .

— Marek Karbarz
źródło

6

FYI: Według Docs MDN dotyczącychwhite-space The nowrapwartość jest obsługiwana w IE 6+, chociaż inne wartości są tylko IE 8+

— Walter Roman

73

Połączenie obu float: left; white-space: nowrap; działało dla mnie.

Każdy z nich niezależnie nie osiągnął pożądanego rezultatu.

— Chris Nolet
źródło

7

Nie znam uzasadnienia tego, ale ustawiłem kontener nadrzędny na display:flexi kontenery podrzędne nadisplay:inline-block i pozostały one w linii pomimo łącznej szerokości dzieci przekraczających nadrzędnego.

Nie trzeba bawić się max-width, max-height,white-space lub cokolwiek innego.

Mam nadzieję, że komuś pomoże.

— elPastor
źródło

1

To działało dla mnie, gdy inne podejścia wymienione powyżej nie działały. Potrzebowałem tylko display: flex. Nie potrzebowałem nic więcej.

— HerrimanCoder

4

Jeśli nie zależy ci na minimalnej szerokości div i po prostu nie chcesz, aby div rozwijał się po całym kontenerze, możesz przesunąć go w lewo - div div domyślnie rozwija się, by obsługiwać jego zawartość, tak jak:

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

— Nicholas Becker
źródło

0

Jeśli twój div ma stałą szerokość, nie powinien się rozszerzać, ponieważ naprawiłeś jego szerokość. Jednak nowoczesne przeglądarki obsługująmin-width właściwość CSS.

Możesz emulować właściwość min-width w starych przeglądarkach IE przy użyciu wyrażeń CSS lub przy użyciu automatycznej szerokości i posiadania obiektu odstępnika w kontenerze. To rozwiązanie nie jest eleganckie, ale może załatwić sprawę:

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

— Mr. Shiny and New 安宇
źródło

-2

Zmuszenie przycisków do pozostania w tej samej linii sprawi, że przekroczą one ustaloną szerokość diva, w którym się znajdują. Jeśli nie masz nic przeciwko, możesz zrobić kolejny div wewnątrz div, który już masz. Nowy div z kolei będzie utrzymywał przyciski i miał stałą szerokość bez względu na to, ile miejsca dwa przyciski muszą pozostać w jednej linii.

Oto przykład:

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

Możesz rozważyć właściwość przepełnienia dla części zawartości pozaparentDiv granicą.

Powodzenia!

— Zoid
źródło