Mise en page "Label - Value" pour centrer sans utiliser de tables

Question

Très souvent, vous aurez un certain nombre d'étiquettes (utilisons le nom, l'âge, la couleur) et une valeur pour chacun! Si j'ai placé ces dans une table de 3 rangées de 2 colonnes je pourrais m'assurer que les valeurs (emploient Steve, 19, rouge) commencent toutes dans la même position horizontale.

Et si je le souhaitais en alignant cette colonne à gauche, et si je voulais aussi avoir la colonne d'étiquette alignée à droite. Les deux colonnes se rencontreraient alors bien au centre de la table.

Comment pourrais-je faire cela sans l'utilisation de tables, mais sans avoir à régler des largeurs fixes!

Answer 1

Vous allez devez vous résoudre à utiliser des largeurs fixes pour vos étiquettes est inférieure au minimum pour obtenir ce que vous essayez d'accomplir

CSS (si vous allez la route pure CSS.) (tiré de HTML Dog.):

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> 

Si vous ne voulez pas absolue largeur fixe, vous pouvez utiliser ce javascript (avec jQuery) et enlever la largeur fixe de la CSS ci-dessus. Il est à noter que si vous obtenez des gens avec javascript désactivé, cela aura l'air horrible!

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

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

J'ai jeté un exemple en direct sur JSFiddle. Compte tenu du cas d'utilisation que vous avez cité, je pense en fait que les tables sont la meilleure solution, mais j'ai un differing opinion on the table/div form debate than most.

Answer 2

J'entends ce que vous dites, mais puis-je vous rappeler que les tableaux sont ok pour les données tabulaires! Mais pour ce faire, en utilisant du CSS pur, vous pouvez faire flotter l'étiquette et la valeur à gauche, effacer ensuite, et définir les deux éléments pour afficher le bloc avec une largeur de 50%.

Answer 3

Je suppose que vous avez besoin de javascript, puis de corriger cela. Je ne crois pas qu'il existe une solution CSS pure à cela.

travaille en effet avec des largeurs fixes peut être un problème lorsque l'on travaille dans un site multilangue où la largeur des étiquettes peuvent différer, ou lorsque les largeurs peuvent varier en fonction des paramètres du navigateur, comme la taille du texte ...

Answer 4

Vous pouvez organiser cela alternativement en utilisant les listes 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; 
}