Положить <label>итег в той же строке

Question

Я пытаюсь создать <form> как часть проекта, в котором есть текстовые входы с меткой перед ними.Я пытаюсь поместить <label> и <input> в одну строку, выровненную по правой стороне, как в этом примере проекта:

Вот код, который я пытался использовать:

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

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

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

Этот код дает мне результат этого:

The <label> выровнены правильно, но <input> на другой линии.Что я могу исправить, чтобы получить как на одной линии, так и по правому краю, как в примере?

Answer 1

Потенциально самый простой вариант - поместить input внутрь label.Сделать элемент label блоком с выравниванием текста по правому краю.

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

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

Answer 2

Удалите <div>s и добавьте <br> после каждого <input>.Добавьте следующие значения к <label> и <input>:

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

height и line-height можно настроить, но оставьте их равными друг другу.Установите <form> width на 100vw и, конечно, text-align: right на <label>s.Поместите <label>s и <input>s в <fieldset> и назначьте следующее для <fieldset>

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

Кстати, у <label>s есть дубликат #id, которыйнедействителен, поэтому удален.

---

Демо

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

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

Answer 3

Когда вы оборачиваете каждый в свой div, вы получаете стопку, которую вы видите.Поместите label и input в один div.

Answer 4

Решение

• Вмещает метку и ввод в один div
• Добавьте display: flex к родительскому элементу, чтобы обеспечить большую гибкость стилейваши поля на маленьких экранах.Например, вы можете переместить метку над входом на маленьких экранах, когда область просмотра ограничена, используя flex-direction: column
• label с, как правило, не имеющие id с.Вместо этого они указывают на form элементы, содержащие id s.Я исправил ваши label s в следующем коде
• Дубликаты id s также запрещены (также исправлены)

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

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

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

Answer 5

Заключив оба элемента в один и тот же элемент div, вы можете выровнять их вместе в ряд.

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

По умолчанию теги div всегда помещают разрыв строки до и после вставки.