CSS: No ajuste el contenido de div

Question

Tengo un div de ancho fijo con dos botones. Si las etiquetas de los botones son demasiado largas, se envuelven: un botón permanece en la primera línea, y el siguiente botón sigue debajo de él en lugar de al lado.

¿Cómo puedo forzar que div se expanda para que ambos botones estén en una línea?

Answer 1

Trate white-space:nowrap;

Answer 2

Si el div tiene un ancho fijo no debe expandirse, debido a que haya solucionado su anchura. Sin embargo, los navegadores modernos admiten una propiedad CSS min-width.

Puede emular la propiedad min-width en navegadores IE antiguos utilizando expresiones CSS o utilizando el ancho automático y teniendo un objeto spacer en el contenedor. Esta solución no es elegante, pero puede hacer el truco:

<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

Si no se preocupan por un ancho mínimo para el div y realmente sólo que no quiero el div se expanda en todo el contenedor, puede flotar a la izquierda - divs flotando por defecto se expanden para mantener a sus contenidos, así:

<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 combinación de ambos float: left;white-space: nowrap; trabajó para mí.

Cada uno de ellos independientemente no logró el resultado deseado.

Answer 5

Forzar que los botones permanezcan en la misma línea los hará permanecer más allá del ancho fijo del div en el que se encuentran. Si estás de acuerdo, puedes hacer otro div dentro del div que ya tienes. El nuevo div, a su vez, mantendrá los botones y tendrá el ancho fijo por el espacio que necesiten los dos botones para permanecer en una línea.

Aquí se muestra un ejemplo:

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

Es posible que desee considerar overflow propiedad para el trozo del contenido fuera de la frontera parentDiv.

¡Buena suerte!

Answer 6

No conozco el razonamiento detrás de esto, pero configuré el contenedor principal en display:flex y los contenedores secundarios en display:inline-block y permanecí en línea a pesar del ancho combinado de los elementos secundarios que superan al elemento primario.

No necesitó juguetear con ancho máximo, altura máxima, espacio en blanco o cualquier otra cosa.

Espero que ayude a alguien.