Layout di “Etichetta - Valore” al centro, senza uso di tabelle

Question

Spesso si avrà un numero di etichette (lascia nome uso, età, colore) e un valore per ogni!

Se ho messo questi in una colonna della tabella 2 3 di fila ho potuto fare in modo che i valori (consente l'uso Steve, 19, Rosso) tutto inizio nella stessa posizione orizzontale.

E se volessi avendo quella colonna di sinistra align, e se anche io volevo avere la colonna etichetta giusta allineati. Le due colonne poi sarebbero incontrati bene nel centro del tavolo ..

Come potrei fare per fare questo senza l'uso di tabelle, ma anche di non dover impostare larghezze fisse!

Answer 1

Si sta andando ad avere per risolvere da soli a usare larghezze fisse per le etichette (se andare via CSS puro.) Di seguito è il minimo per ottenere ciò che si sta cercando di realizzare (tirato da Dog HTML )

CSS:

label {
    clear: left;
    float: left;
    width: 7em; /* or whatever length suits */
    text-align: right;
}

HTML:

<form>
    <div><label>Item 1</label><input /></div>
    <div><label>Item 2</label><input /></div>
    <div><label>Item 3</label><textarea></textarea></div>
</form>

Se in assoluto non si desidera larghezze fisse, quindi è possibile utilizzare questo javascript (con jQuery) e rimuovere la larghezza fissa da quanto sopra CSS. Vale la pena notare che se si ottiene la gente con disattivato JavaScript, questo sarà un aspetto orribile

var largestWidth = 0;
$('label').each(
    function() {
        if ($(this).width() > largestWidth) {
            largestWidth = $(this).width();
        }
    });

$('label').each(
    function() {
        $(this).width(largestWidth);
    });

Ho vomitato un esempio vivo su JSFiddle .

Dato il caso d'uso che hai citato, ho effettivamente pensare tabelle è il modo migliore per andare, ma poi ho un diversa opinione sul tavolo / div dibattito forma rispetto alla maggior parte .

Answer 2

Credo che hai bisogno del Javascript poi a sistemare le cose. Non credo che ci sia una soluzione CSS puro a questo.

Infatti lavorare con larghezze fisse può essere un problema quando si lavora in un sito multilingua dove larghezze etichette possono differire, o dove le larghezze possono variare a seconda delle impostazioni del browser come formato testo ...

Answer 3

Ho sentito quello che stai dicendo, ma può vi ricordo che le tabelle sono ok per i dati tabulari!

Ma per fare questo usando CSS puro si potesse galleggiare l'etichetta e il valore a sinistra, chiaro in seguito, e impostare entrambi gli elementi a blocco di visualizzazione con la larghezza del 50%.

Answer 4

È possibile organizzare questo in alternativa, utilizzando gli elenchi UL LI.

<fieldset>

<legend>Sign-up Form</legend>
<form name="signup" action="index.html" method="post">
<ul> 
<li> <label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</li> 
<li> <label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>



<li> <label for="psw">Password</label>
<input type="text" name="psw" id="psw" size="30" />
</li>



<li> <label for="free">Free Subscrition</label>
<input type="radio" name="subscription" id="free"/>
</li>

<li><label for="submit"></label>
<button type="submit" id="submit">Send</button> </li> 
<ul>
</form>

</fieldset>

css

fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style:none;
}
fieldset li{
clear:both;
list-style:none;
padding-bottom:10px;
}

fieldset input{
float:left;
}
fieldset label{
width:140px;  // or you give width in % here
float:left;
}