web-dev-qa-db-fra.com

Comment ajouter régulièrement de l'espace entre une étiquette et le champ de saisie, quelle que soit la longueur du texte?

Supposons que j'ai 10 champs de saisie et qu'avant les champs de saisie de gauche, j'ai une balise span qui contient le texte pour indiquer ce que l'utilisateur doit entrer dans le champ. J'ai fait des choses mais je ne sais pas comment ajouter de l'espace entre la balise span et le champ de saisie, quelle que soit la taille du texte. 

Comme ça:

enter image description here

cssformscss3html
13
starbucks

Utilisez label au lieu de span. Il est conçu pour être associé à des entrées et conserve certaines fonctionnalités supplémentaires (en cliquant sur l'étiquette, l'entrée est concentrée).

Cela pourrait être exactement ce que vous voulez:

HTML:

<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">

<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">

<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">

CSS:

label {
    width:180px;
    clear:left;
    text-align:right;
    padding-right:10px;
}

input, label {
    float:left;
}

jsfiddle DEMO ici.

17
Petr Čihula

Ceci peut être accompli en utilisant le tout nouveau CSS display: grid ( support du navigateur )

HTML:

<div class='container'>
  <label for="dummy1">title for dummy1:</label>
  <input id="dummy1" name="dummy1" value="dummy1">
  <label for="dummy2">longer title for dummy2:</label>
  <input id="dummy2" name="dummy2" value="dummy2">
  <label for="dummy3">even longer title for dummy3:</label>
  <input id="dummy3" name="dummy3" value="dummy3">
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Lors de l'utilisation de la grille css, les éléments sont disposés par défaut colonne par colonne puis ligne par ligne. La règle grid-template-columns crée deux colonnes de la grille, une qui occupe 1/4 de l'espace horizontal total et l'autre qui occupe 3/4 de l'espace horizontal. Cela crée l'effet désiré.

 grid

JS-FIDDLE

4
0xcaff

Vous pouvez utiliser une table

<table class="formcontrols" >   
    <tr>
        <td>
            <label for="Test">FirstName:</label>
        </td>
        <td  style="padding-left:10px;">
            <input id="Test" name="Test" value="John">
        </td>
    </tr>
    <tr>
        <td>
            <label for="Test">Last name:</label>
        </td>
        <td  style="padding-left:10px;">
            <input id="lastName" name="lastName" value="Travolta">
        </td>
    </tr>
</table>

Le résultat serait: ImageResult

2
Jorciney

Vous pouvez également utiliser le code ci-dessous 

<html>
<head>
    <style>
        .labelClass{
            float: left;
            width: 113px;
        }
    </style>
</head>
<body>
  <form action="yourclassName.jsp">
    <span class="labelClass">First name: </span><input type="text" name="fname"><br>
    <span class="labelClass">Last name: </span><input type="text" name="lname"><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>
2
Divyesh Rupawala