101 votos

CSS: No envuelva contenido del div

Tengo un div de ancho fijo con dos botones en el mismo. Si las etiquetas de los botones son demasiado largos, se envuelven - un botón se mantiene en la primera línea, y el botón al lado sigue por debajo de ella en lugar de al lado.

¿Cómo puedo forzar el div para expandir de manera que ambos botones están en una línea?

222voto

Marek Karbarz Puntos 14870
Intentarlo

33voto

Chris Nolet Puntos 1628

Una combinación de ambos float: left; trabajó para mí.

Cada uno de ellos de forma independiente no logró el resultado deseado.

4voto

Nicholas Becker Puntos 43

Si no se preocupan por un ancho mínimo para el div y realmente no desea que el div se expanda por todo el contenedor, puede flotar dejó - flotaba divs 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>
 

0voto

Si el div tiene un ancho fijo no debe expandirse, porque usted ha arreglado su anchura. Sin embargo, los navegadores modernos soportan un min-width propiedad CSS.

Puede emular la propiedad min-width en viejos navegadores IE utilizando expresiones CSS o mediante el uso de ancho de auto y tener 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>
 

-1voto

Zoid Puntos 1

Obligando a los botones de estancia en la misma línea que los hará ir más allá de la fija el ancho del div en el que están. Si usted está de acuerdo con eso, entonces usted puede hacer el otro div dentro del div que usted ya tiene. El nuevo div vez pulsado los botones y tiene el ancho fijo de embargo, por mucho espacio de los dos botones de la necesidad de mantenerse en una línea.

Aquí está 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>

Usted puede desear considerar el desbordamiento de la propiedad de la porción de que el contenido fuera de la parentDiv frontera.

Buena suerte!

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X