alignement vertical pour les champs de texte

comment puis-je aligner (verticalement) certains champs de saisie de texte avec CSS? par exemple dans les domaines suivants:alignement vertical pour les champs de texte

<form action='<?= $_SERVER['PHP_SELF']; ?>' method='post'> 
      <p><label for='username' class=''>Username:</label> 
      <input type='text' name='username' id='username' class='field' value='' tabindex='10' /></p> 
      <p><label for='password' class=''>Password:</label> 
      <input type='text' name='password' id='password' class='field' value='' tabindex='20' /></p> 
      <p><label for='e-mail' class=''>E-mail:</label> 
      <input type='text' name='e-mail' id='e-mail' class='field' value='' tabindex='35' /></p> 
      <p><input type='submit' name='insert' id='insert' class='button' value='Insert!' tabindex='40' /></p> 
    </form>

Est-ce que je peux faire, en dehors de l'utilisation de tables?

grâce Patrick

Source

2009-11-14 patrick

Je ne comprends pas, qu'est-ce que vous voulez aligner verticalement et par rapport à quoi? –

Le résultat de votre code me semble plutôt vertical ... Etes-vous sûr de ne pas vouloir dire horizontal? Si c'est le cas, vous devriez utiliser 'float: left; largeur: 200px; 'sur le' 's. –

juste curieux: je sais que les tables ne sont pas bonnes pour les lecteurs d'écran (etc ...), mais cela serait-il une si mauvaise situation d'en utiliser une? Cela semble de loin l'option la plus simple avec le moins de code. Ne pas les lecteurs d'écran lire une ligne à la fois, de gauche à droite? – carillonator

Je pense que vous voulez dire que vous voulez que les zones de texte alignées les unes aux autres comme ce qui suit. Astuce: utilisez les outils de développement Internet Explorer, Firefox FireBug ou Operafly Dragonfly pour modifier les attributs de style dans votre page.

<form action='' method='post'> 
<div style='clear:both'> 
    <label style='float:left;width:5em;display:block' for='username' class=''>Username:</label> 
    <input style='float:left;display:block' type='text' name='username' id='username' class='field' value='' tabindex='10' /> 
<div> 
<div style='clear:both'> 
    <label style='float:left;width:5em;display:block' for='password' class=''>Password:</label> 
    <input style='float:left;display:block' type='text' name='password' id='password' class='field' value='' tabindex='20' /> 
</div> 
<div style='clear:both'> 
    <label style='float:left;width:5em;display:block' for='e-mail' class=''>E-mail:</label> 
    <input style='float:left;display:block' type='text' name='e-mail' id='e-mail' class='field' value='' tabindex='35' /> 
</div> 
<div style='clear:both'> 
    <input style='width:5em;display:block' type='submit' name='insert' id='insert' class='button' value='Insert!' tabindex='40' /> 
</div>

Source

2009-11-14 21:03:40

alignement vertical pour les champs de texte

Répondre

Questions connexes