web-dev-qa-db-fra.com

Aligner les étiquettes dans le formulaire à côté de l'entrée

J'ai un scénario de forme très basique et connu dans lequel je dois aligner correctement les étiquettes à côté des entrées. Cependant, je ne sais pas comment le faire.

Mon objectif serait que les étiquettes soient alignées à côté des entrées sur le côté droit. Voici un exemple de résultat souhaité.

enter image description here

J'ai fait un violon pour votre commodité et pour clarifier ce que j'ai maintenant - http://jsfiddle.net/WX58z/

Fragment:

<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>
htmlcssalignment
114
sed

Une solution possible:

  • Donnez les étiquettes display: inline-block;
  • Donnez-leur une largeur fixe
  • Aligner le texte à droite

C'est:

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

170
bfavaretto

Bien que les solutions ici soient réalisables, la technologie la plus récente a apporté ce que je pense être une meilleure solution. CSS Grid Layout nous permet de structurer une solution plus élégante.

Le CSS ci-dessous fournit une structure de "paramètres" à 2 colonnes, dans laquelle la première colonne est censée être une étiquette alignée à droite, suivie d'un contenu dans la deuxième colonne. Un contenu plus compliqué peut être présenté dans la deuxième colonne en l’enveloppant dans un <div>.

[En note de bas de page: j'utilise CSS pour ajouter le ':' derrière chaque étiquette, car il s'agit d'un élément stylistique - ma préférence.]

/* 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>
14
David Rutherford

A répondu à une question comme celle-ci avant, vous pouvez jeter un oeil aux résultats ici:

Créer un formulaire pour avoir des champs et du texte côte à côte - quelle est la manière sémantique de le faire?

Donc, pour appliquer les mêmes règles à votre violon, vous pouvez utiliser display:inline-block pour afficher votre étiquette et vos groupes d’entrée côte à côte, comme suit:

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

violon mis à jour

12
Andres Ilich

J'utilise quelque chose semblable à ceci:

<div class="form-element">
  <label for="foo">Long Label</label>
  <input type="text" name="foo" id="foo" />
</div>

Style:

.form-element label {
    display: inline-block;
    width: 150px;
}
7
Mike G

Vous pouvez également essayer d'utiliser 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>
4
user6797117

Je sais que c'est un vieux fil, mais une solution plus simple consisterait à intégrer une entrée dans l'étiquette comme ceci:

<label>Label one: <input id="input1" type="text"></label>
2
Robert

Vous pouvez faire quelque chose comme ça:

HTML:

<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>

CSS:

.div{
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: 1fr 4fr;
}

.input{
       width: 50%;
}

J'espère que cela t'aides ! :)

0
Rakonjac

Voici la largeur des étiquettes génériques pour toutes les étiquettes de formulaire. Rien ne fixe la largeur.

appelez la calculatrice setLabelWidth avec toutes les étiquettes. Cette fonction chargera toutes les étiquettes sur l'interface utilisateur et déterminera la largeur maximale de l'étiquette. Appliquez la valeur de retour de la fonction ci-dessous à toutes les étiquettes.

     this.setLabelWidth = function (labels) {
            var d = labels.join('<br>'),
                dummyelm = jQuery("#lblWidthCalcHolder"),
                width;
            dummyelm.empty().html(d);
            width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
            width = width > 0 ? width + 5: width;
            //this.resetLabels(); //to reset labels.
            var element = angular.element("#lblWidthCalcHolder")[0];
            element.style.visibility = "hidden";
            //Removing all the lables from the element as width is calculated and the element is hidden
            element.innerHTML = "";
            return {
                width: width,
                validWidth: width !== 0
            };

        };
0
Samyak Jain