CSS: estiramiento del elemento en línea para rellenar el espacio horizontal disponible del contenedor

Por ejemplo, tengo un div 200px que contiene tres botones, el texto es mínimo para que los botones no llenen el espacio horizontal disponible. ¿Es posible ...CSS: estiramiento del elemento en línea para rellenar el espacio horizontal disponible del contenedor

Haga que el último botón se extienda para ocupar todo el espacio restante?
El primer botón para estirar para llenar el espacio restante presionando los dos últimos botones a lo largo?
El botón del medio se estira para llenar el espacio restante presionando el último botón?

Fuente

2009-06-13 ChrisInCambo

no puedes ajustar los anchos como tal ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
<head> 
<title>test css button stretch</title> 
<style> 

#btn_container 
{ 
    width: 200px; 
} 
#btn_container button 
{ 
    width: 20%; 
} 
#btn_container button.stretch 
{ 
    width: 58%; 
} 
</style> 
</head> 
<body> 

<div id="btn_container"> 
<p>last button stretch...</p> 
<button type="button">eat</button> 
<button type="button">drink</button> 
<button class="stretch" type="button">sleep</button> 
<br> 
<p>first button stretch...</p> 
<button class="stretch" type="button">eat</button> 
<button type="button">drink</button> 
<button type="button">sleep</button> 
<br> 
<p>middle button stretch...</p> 
<button type="button">eat</button> 
<button class="stretch" type="button">drink</button> 
<button type="button">sleep</button> 
</div> 
</body> 
</html>

Esto parece conseguir el efecto deseado, es fluida (si el ancho del botón del div contenedor se cambia o se establece en un %), y funciona en IE, Firefox y Opera.

editar: eliminó la clase btn redundante; aumentado el ancho% para la clase de estiramiento; agregó el doctype. Dejó los tipos activados, técnicamente podrían haber sido eliminados solo por un ejemplo, pero meh.

@rpflo: los tipos están ahí porque mis botones en este ejemplo no son botones de envío. Si estos fueran parte de un formulario y se enviaran, los habría dejado ya que el valor predeterminado es type = submit. (W3C HTML BUTTON)

Fuente

2009-06-13 04:10:01

¿Qué pasa con todas las clases y tipos? –

Tienes razón en lo que estaba pensando. Editaré para limpiarlo. –

similares a Roberts:

HTML

<div id="container"> 
    <button id="one">One</button><button id="two">Two</button><button id="three">Three</button> 
</div>

CSS

div#container { 
    border: solid 1px; 
    width: 200px; 
} 

div#container button { 
    width: 33%; 
} 

div#container button:last-child { 
    width: 34%; 
}

que no permite un diseño fluido: anchura debe ser #container conocido, entonces haces las matemáticas.

para permitir un diseño fluido que necesita para saltar en el mundo del posicionamiento absoluto:

div#container { 
    border: solid 1px; 
    width: 50%; /* resize your browser window to see results */ 

    position: relative; 
} 

div#container button { 
    position: absolute; 
    width: 50px; 
} 

button#one { 
    top: 0; 
    left: 0; 
} 

button#two { 
    top: 0; 
    left: 55px; 
} 

button#three { 
    width: auto !important; /* get rid of the 50px width defined earlier */ 
    top: 0; 
    left: 110px; 
    right: 0px; 
}

Cuidado con la altura de #container. Se ha ido ya que todos los niños en este ejemplo están absolutamente posicionados; se puede ver desde el borde.

Fuente

2009-06-13 05:19:09

Este ejemplo no parece funcionar para mí en Firefox, no he probado otros navegadores. – ChrisInCambo

Así es, Firefox se pone un poco extraño con elementos de entrada absolutamente posicionados. No hay tiempo en este momento, pero sé que he arreglado esto en el pasado. –

Me he dado cuenta de que el verdadero problema es que los botones no se estirarán hasta que les dé un ancho explícito (es decir, ancho: 100%). Aún necesita las celdas de la tabla para restringir ese 100% a un modelo 'qué le queda'. Puede establecer 33% en cada botón pero eso no funcionará si sus botones se agregan dinámicamente (a menos que calcule los porcentajes en el servidor).

MÉTODO 1 (no funciona): Los botones no se expanden para ajustarse a la fila (es decir, en la pantalla: table-cell parece ignorarse).

<div style="display:table;width:200px"> 
    <div style="display:table-row"> 
     <button style="display:table-cell">1</button> 
     <button style="display:table-cell">2</button> 
     <button style="display:table-cell">3</button> 
    </div> 
</div>

Para Internet Explorer anteriores a Internet Explorer 8 que necesita para alimentar a una mesa real o como un archivo de compatibilidad de IE8-js.El concepto básico es bastante fácil sin embargo:

<!--[if ie lt 8]> 
<script><!--pseudo-code, not real js--> 
for (el in getElementsByTagName('button')) { 
    if el.style.find('display:table-cell') { 
     el.innerHTML = '<td><button>'+el.innerHTML+'</button></td>' 
    } 
} 
</script> 
<![endif]-->

Método 2 (obras): Hmmm .. Bien por cualquier razón la pantalla: style-celda de la tabla no funciona en los elementos del botón. Sin embargo, pude hacerlo con un margen adicional.

<div style="display:table;width:500px;"> 
    <div style="display:table-row"> 
     <div style="display:table-cell"> <button style="width:100%">1938274</button> </div> 
     <div style="display:table-cell"> <button style="width:100%">2</button> </div> 
     <div style="display:table-cell"> <button style="width:100%">3</button> </div> 
    </div> 
</div>

Admito que no es bonito, pero asegurará que se llene todo el espacio horizontal. Se puede limpiar un poco usando clases como en this demo que juntas. Aún así, cuando se combina con las fallas de IE, es probable que yo diga ignorar a los puristas y usar una tabla:

<style>table button {width:100%}</style> 

<table style="width:500px;"> 
    <tr> <td><button>1938274</button> <td> <button>2</button> <td> <button>3</button> </tr> 
</table>

Fuente

2009-06-13 07:45:05 SpliFF

Hola SpilFF, gracias por la respuesta, este es definitivamente el tipo de solución que estaba buscando, aunque lamentablemente no funciona para mí, los botones no se están estirando (probados en Firefox). También noté que el div de la tabla no estaba cerrado para cerrarlo, pero no fue una alegría. – ChrisInCambo

CSS: estiramiento del elemento en línea para rellenar el espacio horizontal disponible del contenedor

Respuesta

Cuestiones relacionadas