将<label>和<input type =“ text” />标记放在同一行中

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>

这段代码给了我这样的结果：

<label>正确对齐，但<input>在另一行。我该如何解决，以使两者都在同一行上并像示例一样向右对齐？

Answer 1

解决方案

• 将标签和输入内容都放在一个div
中
• 将display: flex添加到父级，这样您就可以在小屏幕上设置字段样式时更加灵活。例如，当使用flex-direction: column
限制视口空间时，可以将标签移动到小屏幕输入上方
• label通常没有id。相反，它们指向包含form的{​​{1}}个元素。我已通过以下代码修复了您的id s
• 重复的label也一样（也是固定的）

id

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

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

Answer 2

通过将两个元素都包含在同一个“ 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”标签始终在插入前后插入换行符。

Answer 3

删除<div>s，并在每个<br>之后添加<input>。将以下内容同时添加到<label>和<input>中：

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

height和line-height可以调整，但要彼此相等。将<form>的宽度设置为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 4

将它们分别包装在自己的div中时，您会看到堆叠。将label和input都放在一个div中。

Answer 5

可能最简单的选择是将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>