Come non avvolgere i contenuti di un div?

244

Ho una larghezza fissa divcon due pulsanti. Se le etichette dei pulsanti sono troppo lunghe, si avvolgono: un pulsante rimane sulla prima riga e il pulsante successivo segue sotto di esso invece che adiacente ad esso.

Come posso forzare l' divespansione in modo che entrambi i pulsanti siano su una riga?

html css

— JamesBrownIsDead
fonte

Non riesco nemmeno ad accedere con il mio OpenID a doctype, quindi penso che la domanda appartenga meglio qui.

— Stefan Kendall,

3

@nicholaides Sono d'accordo che funzionerebbe su doctype ma penso che sia del tutto legittimo anche su SO.

— TM.

454

Prova white-space: nowrap;. . .

— Marek Karbarz
fonte

6

FYI: Secondo i documenti di MDN suwhite-space , il nowrapvalore è supportato in IE 6+, sebbene altri valori siano solo IE 8+

— Walter Roman,

73

Una combinazione di entrambi ha float: left; white-space: nowrap;funzionato per me.

Ognuno di loro indipendentemente non ha raggiunto il risultato desiderato.

— Chris Nolet
fonte

7

Non conosco il ragionamento alla base di questo, ma ho impostato il mio contenitore genitore su display:flexe i contenitori figlio su display:inline-blocke sono rimasti in linea nonostante la larghezza combinata dei bambini che superasse il genitore.

Non aveva bisogno di giocare con max-width, max-height, white-space, o qualsiasi altra cosa.

Spero che aiuti qualcuno.

— elPastor
fonte

1

Questo ha funzionato per me quando altri approcci sopra elencati non lo hanno fatto. Tutto ciò di cui avevo bisogno era display: flex. Non avevo bisogno di nient'altro.

— HerrimanCoder

4

Se non ti interessa una larghezza minima per il div e davvero non vuoi che il div si espanda sull'intero container, puoi farlo fluttuare a sinistra - i div fluttuati di default si espandono per supportare il loro contenuto, in questo modo:

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

0

Se il tuo div ha una larghezza fissa, non dovrebbe espandersi, perché hai fissato la sua larghezza. Tuttavia, i browser moderni supportano una min-widthproprietà CSS.

È possibile emulare la proprietà di larghezza minima nei browser IE precedenti utilizzando le espressioni CSS o utilizzando la larghezza automatica e avendo un oggetto distanziatore nel contenitore. Questa soluzione non è elegante ma può fare il trucco:

<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 e New 安宇
fonte

-2

Forzare i pulsanti sulla stessa linea li farà andare oltre la larghezza fissa del div in cui si trovano. Se stai bene, puoi fare un altro div all'interno del div che hai già. Il nuovo div, a sua volta, terrà i pulsanti e avrà la larghezza fissa dello spazio necessario ai due pulsanti per rimanere su una riga.

Ecco un esempio:

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

È possibile prendere in considerazione la proprietà di overflow per la parte del contenuto al di fuori del parentDivbordo.

In bocca al lupo!

— Zoid
fonte