pulsante con display: block non allungato

Si consideri il seguente codice HTML:pulsante con display: block non allungato

<!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>

mia domanda è perché tasti non si estendono alla larghezza 100%, perché la loro display è block. Come ottenere questo? Non riesco a impostare lo stile dei pulsanti su width: 100% perché potrebbero sovraccaricare il blocco principale a causa del margine.

fonte

2012-03-14 Martin Ždila

hai aggiunto posizione: relativo; e poi ha aggiunto la larghezza: 100%? –

possibile duplicato di [input con display: il blocco non è un blocco, perché no?] (Http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not) – Qtax

Qtax: 'box-dimensionamento: border-box' non ha funzionato per me. Non so perché. –

È possibile aggiungere il riempimento al contenitore div e rimuovere il margine orizzontale dai pulsanti. Allora si può applicare la larghezza 100% loro:

<!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>

Demo: http://jsfiddle.net/xwt9T/1/

fonte

2012-03-14 09:35:24 welldan97

È una specie di "trucco" per me, ma funziona. Grazie! –

Ma, gli elementi di blocco non sono necessariamente 100% di larghezza ... – Greg

Suggerisco di usare il ridimensionamento a scatola: border-box, per mantenere il riempimento dei pulsanti all'interno di quel 100% – FrancescoMM

prova con questo,

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

fonte

2012-03-14 09:37:06

flex-grow: 1 produrrà il comportamento previsto.

fonte

2017-04-27 13:39:34 brannigan

pulsante con display: block non allungato

risposta

Problemi correlati