CSS: non avvolgere il contenuto di div

Question

Ho un div a larghezza fissa con due pulsanti. Se le etichette dei pulsanti sono troppo lunghe, si avvolgono: un pulsante rimane sulla prima riga e al di sotto di esso segue il pulsante successivo anziché adiacente ad esso.

Come posso forzare l'espansione del div in modo che entrambi i pulsanti si trovino su una riga?

Answer 1

Prova white-space:nowrap;

Answer 2

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

È possibile emulare la proprietà di larghezza minima nei vecchi browser IE utilizzando le espressioni CSS o utilizzando la larghezza automatica e un oggetto spaziatore 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> 

Answer 3

Se non si cura di una larghezza minima per il div e davvero solo che non voglio il div di espandersi su tutto il contenitore, è possibile float ha lasciato - div galleggiavano per impostazione predefinita si espandono per sostenere i loro contenuti, 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> 

Answer 4

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

Ognuno di loro in modo indipendente non ha ottenuto il risultato desiderato.

Answer 5

Costringere i pulsanti a rimanere nella stessa linea li farà andare oltre la larghezza fissa del div in cui si trovano. Se si sta bene con quello, allora si può fare un altro div all'interno del div che hai già. Il nuovo div a sua volta manterrà i pulsanti e avrà la larghezza fissa di quanto spazio i due pulsanti debbano rimanere in 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> 

Si può prendere in considerazione overflow proprietà per il pezzo del contenuto al di fuori del confine parentDiv.

Buona fortuna!

Answer 6

Non conosco il ragionamento alla base di questo, ma ho impostato il contenitore genitore su display:flex e i contenitori secondari su display:inline-block e sono rimasti in linea nonostante la larghezza combinata dei bambini superi il genitore.

Non ha bisogno di giocare con larghezza massima, altezza massima, spazio bianco o qualsiasi altra cosa.

La speranza che aiuta qualcuno.