Allinea le etichette nel modulo accanto all'input

136

Ho uno scenario molto semplice e conosciuto in cui ho bisogno di allineare correttamente le etichette accanto agli input. Tuttavia non so come farlo.

Il mio obiettivo sarebbe che le etichette siano allineate accanto agli input sul lato destro. Ecco un esempio di immagine del risultato desiderato.

inserisci qui la descrizione dell'immagine

Ho creato un violino per la tua comodità e per chiarire quello che ho ora - http://jsfiddle.net/WX58z/

Frammento:

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

Espandi frammento

html css alignment

— Stan
fonte

189

Una possibile soluzione:

Dai le etichette display: inline-block;
Dai loro una larghezza fissa
Allinea il testo a destra

Questo è:

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

Espandi frammento

JSFiddle

— bfavaretto
fonte

4

Come posso farlo funzionare se alcune delle etichette sono caselle di controllo o pulsanti di opzione? Le etichette per questi elementi finiscono con la stessa larghezza fissa delle etichette della casella di testo che non è desiderata. C'è un modo per farlo senza una larghezza fissa sull'etichetta?

— Rebecca Meritz,

@RebeccaMeritz Intendi quando il markup ha prima la casella di controllo e poi l'etichetta? Puoi aggiungere una classe ad entrambi e modellarli separatamente. Forse dovresti fare una nuova domanda al riguardo.

— bfavaretto,

2

Come renderlo reattivo? E come affrontare i18n? Voglio dire che le etichette di testo hanno una lunghezza diversa in lingue diverse, quindi temo che l'impostazione di riempimento a larghezza fissa non funzioni se il testo è lungo.

— Azimuth,

@Azimuth Al giorno d'oggi, potresti voler utilizzare la griglia CSS.

— bfavaretto,

1

questo indica la larghezza fissa, dovrebbe essere dinamico, in base alla larghezza massima dell'etichetta.

— Samyak Jain

27

Mentre le soluzioni qui sono realizzabili, la tecnologia più recente ha fatto per quella che penso sia una soluzione migliore. CSS Grid Layout ci consente di strutturare una soluzione più elegante.

Il CSS di seguito fornisce una struttura di "impostazioni" a 2 colonne, in cui la prima colonna dovrebbe essere un'etichetta allineata a destra, seguita da alcuni contenuti nella seconda colonna. I contenuti più complicati possono essere presentati nella seconda colonna racchiudendoli in un <div>.

[Come nota a margine: uso CSS per aggiungere il ':' che segue ogni etichetta, poiché si tratta di un elemento stilistico - la mia preferenza.]

/* CSS */

div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.settings label       { text-align:right; }
div.settings label:after { content: ":"; }

<!-- HTML -->

<div class="settings">
    <label>Label #1</label>
    <input type="text" />

    <label>Long Label #2</label>
    <span>Display content</span>

    <label>Label #3</label>
    <input type="text" />
</div>

Espandi frammento

— David Rutherford
fonte

1

Ehi, puoi aggiungere un violino per favore?

— Stan,

Sì, ho aggiornato la risposta per utilizzare gli snippet.

— David Rutherford,

Con quale versione e piattaforma Chrome stai riscontrando problemi?

— David Rutherford,

1

Soluzione ottimale! Funziona bene ora in Chrome 73.

— Philipp Michalski

Eccezionale! Se si sostituisce la definizione delle colonne sopra con grid-template-columns: max-content 1fr;, la seconda colonna utilizzerà tutta la larghezza rimanente. Questo per me è il santo graal di tali layout, in cui non è necessario specificare alcuna larghezza di colonna o contenuto e tutto si adatta perfettamente allo spazio disponibile, automaticamente.

— jeff-h

12

Ha risposto a una domanda come questa prima, puoi dare un'occhiata ai risultati qui:

Creare un modulo per avere campi e testo uno accanto all'altro: qual è il modo semantico per farlo?

Quindi, per applicare le stesse regole al violino puoi usare display:inline-block per visualizzare l'etichetta e i gruppi di input affiancati, in questo modo:

CSS

input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
    margin-left:20px
}

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 140px;
}

violino aggiornato

— Andres Ilich
fonte

Questa è una soluzione molto bella, tranne per il fatto che è necessario codificare la larghezza delle etichette. Se una nuova etichetta è troppo lunga, il layout si interrompe. Sembra che ci dovrebbe essere una soluzione più solida?

— mattstuehler,

8

Uso qualcosa di simile a questo:

<div class="form-element">
  <label for="foo">Long Label</label>
  <input type="text" name="foo" id="foo" />
</div>

Stile:

.form-element label {
    display: inline-block;
    width: 150px;
}

— Mike G
fonte

4

Puoi anche provare a usare la scatola flessibile

<head><style>
body {
    color:white;
    font-family:arial;
    font-size:1.2em;
}
form {
    margin:0 auto;
    padding:20px;
    background:#444;
}
.input-group {
    margin-top:10px;
    width:60%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
label, input {
    flex-basis:100px;
}
</style></head>
<body>

<form>
    <div class="wrapper">
        <div class="input-group">
            <label for="user_name">name:</label>
            <input type="text" id="user_name">
        </div>
        <div class="input-group">
            <label for="user_pass">Password:</label>
            <input type="password" id="user_pass">
        </div>
    </div>
</form>

</body>
</html>

— user6797117
fonte

È carino, ma non è quello che ha chiesto. Guarda l'immagine in op

— phorgan1 il

3

So che questo è un vecchio thread, ma una soluzione più semplice sarebbe quella di incorporare un input all'interno dell'etichetta in questo modo:

<label>Label one: <input id="input1" type="text"></label>

Espandi frammento

— Roberto
fonte

Stavo cercando una soluzione per questo (includi l'input all'interno dell'etichetta) ma con testo allineato

— Natim

0

Ecco la larghezza delle etichette generiche per tutte le etichette dei moduli. Niente di larghezza fissa.

chiama il calcolatore setLabelWidth con tutte le etichette. Questa funzione caricherà tutte le etichette sull'interfaccia utente e scoprirà la larghezza massima dell'etichetta. Applica il valore di ritorno della funzione seguente a tutte le etichette.

     this.setLabelWidth = function (labels) {
            var d = labels.join('<br>'),
                dummyelm = jQuery("#lblWidthCalcHolder"),
                width;
            dummyelm.empty().html(d);
            width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
            width = width > 0 ? width + 5: width;
            //this.resetLabels(); //to reset labels.
            var element = angular.element("#lblWidthCalcHolder")[0];
            element.style.visibility = "hidden";
            //Removing all the lables from the element as width is calculated and the element is hidden
            element.innerHTML = "";
            return {
                width: width,
                validWidth: width !== 0
            };

        };

— Samyak Jain
fonte

0

Puoi fare qualcosa del genere:

HTML:

<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>

CSS:

.div{
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: 1fr 4fr;
}

.input{
       width: 50%;
}

Spero che questo ti aiuti ! :)

— Rakonjac
fonte