web-dev-qa-db-fra.com

Aligner les champs de saisie HTML par:

J'ai un formulaire HTML comme:

 <html>
  Name:<input type="text"/></br>
  Email Address:<input type="text"/></br>
  Description of the input value:<input type="text"/></br>
 </html>

Désormais, les étiquettes commencent toutes dans la même colonne, mais les zones de texte commencent à des positions différentes en fonction de la longueur du texte de l'étiquette.

Existe-t-il un moyen d'aligner les champs de saisie de sorte que tous les ":" et les zones de texte commencent à la même position et que le texte précédent soit aligné à droite jusqu'à ce que ":"?

Je suis d'accord avec l'utilisation de CSS si cela peut aider à atteindre cet objectif.

htmlcsshtml5user-interfacealignment
54
Sankar

Travailler JS Fiddle

HTML: 

  <div>
      <label>Name:</label><input type="text">
      <label>Email Address:</label><input type = "text">
      <label>Description of the input value:</label><input type="text">
  </div>

CSS: 

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: right;
}
input {
  display: inline-block;
  float: left;
}
92
DaneSoul

Vous pouvez utiliser une étiquette (voir JsFiddle )

[~ # ~] css [~ # ~] 

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

[~ # ~] html [~ # ~] 

<html> 
    <label for="name">Name:</label><input id="name" type="text"><br />
    <label for="email">Email Address:</label><input id="email" type="text"><br /> 
    <label for="desc">Description of the input value:</label><input id="desc" type="text"><br /> 
 </html>

Ou vous pouvez utiliser ces étiquettes dans un tableau ( JsFiddle )

<html>
    <table>
        <tbody>
            <tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
            <tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
            <tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
        </tbody>
    </table>
 </html>
18
huysentruitw

Définissez une largeur sur l'élément de formulaire (qui devrait exister dans votre exemple!) Et faites flotter (et effacer) les éléments d'entrée. En outre, déposez les éléments br.

3
Madara Uchiha

dans mon cas, je mets toujours ces choses dans une balise p comme

<p> name : < input type=text /> </p>

et ainsi de suite, puis l'application du css comme

p {
  text-align:left;
}

p input {
  float:right;
}

Vous devez spécifier la largeur de la balise p.Parce que les balises d’entrée flotteront complètement.

Ce css affectera également le bouton d'envoi. Vous devez remplacer la règle pour cette balise.

2
maksbd19

Je sais que cette approche a déjà été adoptée, mais je pense que l’utilisation de tableaux permet de générer facilement la présentation, bien que cela ne soit pas forcément la meilleure des pratiques .

JSFiddle

HTML

<table>

    <tr><td>Name:</td><td><input type="text"/></td></tr>

    <tr><td>Age:</td><td><input type="text"/></td></tr>

</table>

<!--You can add the fields as you want-->

CSS

td{
    text-align:right;
}
1
IcyFlame

http://jsfiddle.net/T6zhj/1/

L'utilisation de display table-cell/row fera le travail sans aucune largeur.

Le html:

 <html>
  <div>
      <div class="row"><label>Name:</label><input type="text"></div>
      <div class="row"><label>Email Address:</label><input type = "text"></div>
      <div class="row"><label>Description of the input value:</label><input type="text"></div>
  </div>
 </html>

Le Css:

label{
    display: table-cell;
    text-align: right;
}
input {
  display: table-cell;
}
div.row{
    display:table-row;
}
1
vonwa

Je viens de donner la largeur à Label et le type d'entrée a été aligné automatiquement.

input[type="text"] {
    width:100px;
        height:30px;
        border-radius:5px;
        background-color: lightblue;
        margin-left:2px;
  position:relative;
}

label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;

}
<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>
1
Parul