Bottoni a tutta larghezza

**Tom1884** · 01-10-2016, 12:11

Due bottoni che devono "spartirsi" la larghezza totale (100%) della pagina, mantenendo un piccolo spazio tra i due.

codice HTML:

<div class="btn-group">
   <button type="button" class="btn-50">Bottone 1</button>
   <button type="button" class="btn-50">Bottone 2</button>
</div>

Impostando la width a 50%, vanno a capo. A 49% quello a destra non raggiunge il bordo pagina:
Schermata 2016-10-01 alle 12.10.39.png

Come è meglio che proceda?

**KillerWorm** · 01-10-2016, 13:56

Mettili al 49% (o quanto serve per mantenerli sulla stessa linea e avere lo spazio in mezzo) quindi imposta float:right per quello a destra.

**Tom1884** · 01-10-2016, 13:59

Originariamente inviata da KillerWorm

Mettili al 49% (o quanto serve per mantenerli sulla stessa linea e avere lo spazio in mezzo) quindi imposta float:right per quello a destra.

Grazie mille, avevo pensato a questa soluzione come emergenza: se in futuro i bottoni dovessero diventare 3 o più...?

**KillerWorm** · 01-10-2016, 20:01

Sicuramente ci sono varie soluzioni. Se stai lavorando con bootstrap, la classe btn-group-justified potrebbe fare al caso.

**KillerWorm** · 01-10-2016, 22:56

Qui una soluzione con flex-box. La proprietà flex-grow ripartisce la larghezza dei vari elementi rispetto al contenitore. In questo caso, tutti avranno stessa larghezza. Inoltre ho impostato un margin di 4px per definire lo spazio tra gli elementi.

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
            .fit-width {
                width: 100%;
                display: flex;
            }
            .fit-width>* {
                flex-grow: 1;
                margin-right: 4px;
            }
            .fit-width>:first-child {
                margin-left: 4px;
            }
    </style>
  </head>
  <body>
        <div class="fit-width">
            <button type="button">Bottone 1</button>
            <button type="button">Bottone 2</button>
        </div>
        <div class="fit-width">
            <button type="button">Bottone 1</button>
            <button type="button">Bottone 2</button>
            <button type="button">Bottone 3</button>
        </div>
        <div class="fit-width">
            <button type="button">Bottone 1</button>
            <button type="button">Bottone 2</button>
            <button type="button">Bottone 2</button>
            <button type="button">Bottone 4</button>
        </div>
  </body>
</html>

Discussione: Bottoni a tutta larghezza

Strumenti discussione

Ricerca discussione

Visualizza

Bottoni a tutta larghezza

Permessi di invio