botón con display: block no se extendía

Consideremos el siguiente código HTML:botón con display: block no se extendía

<!DOCTYPE html> 
<html> 
<head> 
    <title>TEST</title> 
    <style> 
     button { 
      display: block; 
      margin: 10px; 
     } 
    </style> 
</head> 
<body> 
    <div style="width: 100px; border: 1px solid black"> 
     <button>hello</button> 
     <button>hi</button> 
    </div> 
</body> 
</html>

Mi pregunta es por qué botones no se extienden a la anchura del 100% debido a que su display es block. ¿Cómo lograr esto? No puedo establecer el estilo de los botones en width: 100% porque desbordarían su bloque primario debido al margen.

Fuente

2012-03-14 Martin Ždila

ha agregado la posición: relative; y luego agregó ancho: 100%? –

posible duplicado de [entrada con visualización: el bloque no es un bloque, ¿por qué no?] (Http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not) – Qtax

Qtax: 'box-sizing: border-box' no me ha funcionado. No sé por qué. –

Puede agregar relleno al contenedor div y eliminar el margen horizontal de los botones. A continuación, puede aplicar 100% de ancho a ellos:

<!DOCTYPE> 
<html> 
<head> 
    <title>TEST</title> 
    <style> 
     button { 
      display: block; 
      width:100%; 
      margin: 10px 0; 
     } 
    </style> 
</head> 
<body> 
    <div style="width: 100px; border: 1px solid black; padding:0 10px;"> 
     <button>hello</button> 
     <button>hi</button> 
    </div> 
</body> 
</html>

Demostración: http://jsfiddle.net/xwt9T/1/

Fuente

2012-03-14 09:35:24 welldan97

Es una especie de "hack" para mí, pero funciona. ¡Gracias! –

Pero, los elementos del bloque no son necesariamente del 100% de ancho ... – Greg

Sugeriría usar el tamaño de caja: border-box, para mantener el relleno del botón dentro de ese 100% – FrancescoMM

intento con esto,

<div style="width: 100px; border: 1px solid black"> 
    <button style="width:100%; float: left;margin-left:0px;">hello</button> 
    <button>hi</button> 
</div>

Fuente

2012-03-14 09:37:06

flex-grow: 1 producirá el comportamiento esperado.

Fuente

2017-04-27 13:39:34 brannigan

botón con display: block no se extendía

Respuesta

Cuestiones relacionadas