将a和标记放在同一行中

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限制视口空间时，您可以在小屏幕上将输入上方的标签移动
• labels通常没有ids。相反，他们指向包含forms的id元素。我在以下代码中修复了你的labels
• 重复的ids也是禁忌（也是固定的）

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