Allinea le etichette nella forma accanto all'ingresso

Ho uno scenario di base molto conosciuto e noto in cui ho bisogno di allineare le etichette accanto agli input correttamente. Tuttavia non so come farlo.Allinea le etichette nella forma accanto all'ingresso

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

enter image description here

ho fatto un violino per comodità e per chiarire quello che ho adesso - http://jsfiddle.net/WX58z/

Snippet:

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

fonte

2012-03-13 sed

138

Una possibile soluzione:

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

Cioè:

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>

JSFiddle

fonte

2012-03-13 14:59:39 bfavaretto

Come fare Faccio questo lavoro se alcune delle etichette sono check-box o pulsanti radio? 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? –

@ RebeccaMeritz Vuoi dire quando il markup ha la casella di controllo prima, e l'etichetta in seguito? È possibile aggiungere una classe a entrambi e assegnarli separatamente. Forse dovresti [fare una nuova domanda] (http://stackoverflow.com/questions/ask) a riguardo. – bfavaretto

io 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; 
}

fonte

2012-03-13 15:01:03

risposto a una domanda come questa prima, si può dare un'occhiata ai risultati qui:

Creating form to have fields and text next to each other - what is the semantic way to do it?

Quindi, per applicare le stesse regole per la vostra Fiddle è possibile utilizzare display:inline-block per visualizzare l'etichetta e 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; 
}

updated fiddle

fonte

2012-03-13 15:11:34

Si può anche provare a utilizzare Flex-box

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

fonte

2016-09-05 16:17:05 user6797117

Questo è carino, ma non è affatto quello che ha chiesto. Guarda l'immagine su – Patrick

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

Il CSS di seguito fornisce una struttura "impostazioni" a 2 colonne, in cui si prevede che la prima colonna sia un'etichetta allineata a destra, seguita da un contenuto nella seconda colonna. Contenuti più complicati possono essere presentati nella seconda colonna avvolgendoli in un <div>.

[Come un lato nota: Io uso CSS per aggiungere il ':' che percorsi ogni etichetta, in quanto questo è 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>

fonte

2018-01-22 16:43:07

Ehi, puoi aggiungere un violino per favore? – sed

Sì, ho aggiornato la risposta per fare uso di snippet. –

Funziona in FF ma non in Chrome –

Allinea le etichette nella forma accanto all'ingresso

risposta

Problemi correlati