content - CSS: no envolver contenidos de div

wrap content css

Question

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

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

Answer 1

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

Aquí hay 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 la propiedad de overflow para la parte del contenido fuera del borde parentDiv .

¡Buena suerte!

Answer 2

No sé el razonamiento detrás de esto, pero configuro mi contenedor principal para display:flex y los contenedores secundarios para display:inline-block y el contenido en línea a pesar del ancho combinado de los hijos que exceden al padre.

No fue necesario jugar con el ancho máximo, la altura máxima, el espacio en blanco o cualquier otra cosa.

Espero que ayude a alguien.

Answer 3

Si no te importa un ancho mínimo para el div y realmente no quieres que el div se expanda por todo el contenedor, puedes hacer que flote a la izquierda: los divs flotantes se expanden de manera predeterminada para admitir su contenido, 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

Si tu div tiene un ancho fijo, no debería expandirse, porque has fijado su ancho. Sin embargo, los navegadores modernos admiten una propiedad CSS de min-width .

Puede emular la propiedad de ancho mínimo en los navegadores IE antiguos utilizando expresiones CSS o usando ancho automático y teniendo un objeto espaciador 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 5

Una combinación de ambos float: left; white-space: nowrap; trabajó para mi.

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

Answer 6

Trate white-space:nowrap;