¿Cómo no envolver el contenido de un div?

243

Tengo un ancho fijo divcon dos botones. 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 adyacente.

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

html css JamesBrownIsDead
fuente
Ni siquiera puedo iniciar sesión con mi OpenID para doctype, por lo que creo que la pregunta mejor pertenece aquí.
Stefan Kendall el
3
@nicholaides Estoy de acuerdo en que funcionaría en doctype, pero creo que también es totalmente legítimo en SO.
TM.

Respuestas:

73

Una combinación de ambos float: left; white-space: nowrap;funcionó para mí.

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

Chris Nolet
fuente
6

No sé el razonamiento detrás de esto, pero configuré mi contenedor principal display:flexy los contenedores secundarios display:inline-blocky se mantuvieron en línea a pesar del ancho combinado de los niños que exceden al principal.

No tuvo necesidad de juguete con max-width, max-height, white-space, o cualquier otra cosa.

Espero que ayude a alguien.

elPastor
fuente
1
Esto funcionó para mí cuando otros enfoques enumerados anteriormente no lo hicieron. Todo lo que necesitaba era display: flex. No necesitaba nada más.
HerrimanCoder
4

Si no le importa un ancho mínimo para el div y realmente no quiere que el div se expanda por todo el contenedor, puede flotarlo hacia la izquierda; los div flotantes se expanden de manera predeterminada para admitir su contenido, de la siguiente manera:

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

Si su div tiene un ancho fijo, no debería expandirse, porque ha arreglado su ancho. Sin embargo, los navegadores modernos admitenmin-width propiedad CSS.

Puede emular la propiedad de ancho mínimo en los navegadores IE antiguos usando expresiones CSS o usando el 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>
Sr. Brillante y Nuevo 安 宇
fuente
-2

Forzar que los botones permanezcan en la misma línea hará que vayan más allá del ancho fijo del div en el que se encuentran. Si está de acuerdo con eso, puede hacer otro div dentro del div que ya tiene. El nuevo div a su vez mantendrá los botones y tendrá el ancho fijo de la cantidad de 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 desbordamiento para la porción del contenido fuera delparentDiv borde.

¡Buena suerte!

Zoid
fuente