1
votes

Placez une balise et dans la même ligne

J'essaie de créer un

dans le cadre d'un projet, qui a des entrées de texte avec une étiquette devant eux. J'essaye de mettre le et le sur la même ligne, alignés sur le côté droit comme cet exemple de projet:

Voici le code que j'ai tenté d'utiliser:

<form id="survey-form">
  <div class="labelrow">
    <label id="name" for="name">* Name:</label></div>
  <div class="inputrow">
    <input type="text" id="name" class="input-field" required placeholder="Enter your name"></div>

  <div class="labelrow">
    <label id="email" for="email">* Email:</label>
  </div>
  <div class="inputrow">
    <input type="email" id="name" class="input-field" required placeholder="Enter your email">
  </div>
</form>

.labelrow {
  text-align: right;
  vertical-align: top;
}

.inputrow {
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

Ce code me donne le résultat de ceci:

Le code > sont correctement alignés, mais les sont sur l'autre ligne. Que puis-je corriger pour obtenir les deux sur la même ligne et alignés à droite comme dans l'exemple?

html css forms

0 commentaires

5 Réponses :

1
votes

En englobant les deux éléments dans le même "div", vous pouvez les aligner sur une ligne.

<form id="survey-form">
    <div class="inputrow">   
        <label id="name" for="name">* Name:</label>
        <input type="text" id="name" class="input-field" required placeholder="Enter your name">
    </div>
    <div class="inputrow">   
        <label id="email" for="email">* Email:</label>
        <input type="email" id="name" class="input-field" required placeholder="Enter your email">
    </div>
</form>

Par défaut, les balises "div" placent toujours un saut de ligne avant et après " réinséré.

0 commentaires

0
votes

Lorsque vous enveloppez chacun dans leur propre div , vous obtenez l'empilement que vous voyez. Mettez à la fois le libellé et le input dans un seul div .

0 commentaires

2
votes

Regroupez le libellé et l'entrée dans un seul div

Ajoutez display: flex au parent afin d'avoir plus de flexibilité en stylisant vos champs sur de petits écrans. Par exemple, vous pouvez déplacer le libellé au-dessus de l'entrée sur les petits écrans lorsque l'espace de la fenêtre est limité en utilisant flex-direction: column

Les

libellés n'ont généralement pas de id . Au lieu de cela, ils pointent vers des éléments form contenant des id s. J'ai corrigé vos libellés dans le code suivant

Les id en double sont également un non-non (également corrigé)

<form id="survey-form">
  <div class="row">
    <label for="name">* Name:</label>
    <input type="text" id="name" class="input-field" required placeholder="Enter your name">    
    </div>

  <div class="row">
    <label for="email">* Email:</label>
    <input type="email" id="email" class="input-field" required placeholder="Enter your email">    
  </div>
</form>

.row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.input-field {
  margin-left: 1em;
  padding: .5em;
  margin-bottom: .5em;
}

1 commentaires

Fonctionne très bien! Merci beaucoup!

1
votes

Supprimez les

 s  et ajoutez un  
  après chaque  . Ajoutez ce qui suit à la fois à   et  : 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<form id="survey-form">

  <fieldset>
  
    <legend>Let us know how we can improve freeCodeCamp</legend>

    <label for="name">* Name:</label>

    <input id="name" type="text" placeholder="Enter your name" required><br>

    <label for="email">* Email:</label>

    <input id="email" type="email" placeholder="Enter your email" required><br>

    <label for="age">* Age:</label>

    <input id="age" type="number" placeholder="Enter your age" min='18' max='120' required><br>

    <sup>* Required</sup>
    
    <button type='submit'>Submit</button>

  </fieldset>
  
</form>
  height  et  line-height  peuvent être ajustés mais les garder égaux l'un à l'autre. Réglez 
 
 width à 100vw et bien sûr  text-align: right  sur les   s . Placez les   s  et   s  dans un   et attribuez ce qui suit au    
 
html,
body {
  width: 100%;
  height: 100%;
  font: 400 16px/1.2 Raleway;
  background: #FBFBFB;
}

form {
  width: 70vw;
}

fieldset {
  width: 50vw;
  text-align: right;
  margin-left: 20vw;
  border: 0px none transparent;
  background: none;
}

legend {
  width: 70vw;
  text-align:center;
  margin: 0 auto;
}

label,
input,
button {
  display: inline-block;
  height: 1.2rem;
  line-height: 1.2rem;
  vertical-align: middle;
  padding-left: 5px;
  margin-top: 15px;
  font: inherit;
}

input {
  width: 60%;
  max-width: 300px;
  border-radius: 4px;
}

label {
  width: 30%;
  text-align: right;
}

button {
  height: 1.5rem;
  padding: 0 5px;
  margin: 0 0 0 auto;
  float: right;
  cursor:pointer;
}

sup {
  display:inline-block;
  width: 25%;
  margin-left: 70%;
  margin-top: 10px;
  text-align: right;
}
  BTW les   s  ont un  #id  en double qui est invalide, donc supprimé. 
 
  Démo 
 
 

width: 50vw;
margin-left: 40vw;
border: 0px none transparent

display: inline-block;
height: 1.2rem; 
line-height: 1.2rem;
vertical-align: middle;

0 commentaires

0
votes

L'option potentiellement la plus simple est de mettre input dans le label . Faites du label un élément de bloc avec le texte aligné à droite.

<form id="survey-form">
  
    <label id="name" for="name">* Name: <input type="text" id="name" class="input-field" required placeholder="Enter your name"></label>
    <label id="email" for="email">* Email: <input type="email" id="name" class="input-field" required placeholder="Enter your email"></label>
</form>

label {
  display:block;
  text-align:right;
  margin: 5px;
}

0 commentaires