我的输入和标签不是内联的

Question

我知道您可以使用 display:inline 但在这种情况下它似乎不起作用。也许它与 display:block 的输入和标签有关。

我的输入和标签相对于彼此沿对角线向下移动。

查看截屏视频：http://screencast.com/t/pFGzbRvTSy

input, label {
	display: block;
	margin-top: 5px;
	vertical-align: top;
}

input { 
	display: inline;
	float: left;
	margin-right: 10px;
}

<label for="start age">START AGE</label>
<input type="number" name="start age"></input>
	
<label for="retirement age">RETIREMENT AGE</label>
<input type="number" name="retirement age"></input>
	
<label for="current income">CURRENT INCOME</label>
<input type="number" name="current income"></input>
	
<label for="inflation">INFLATION</label>
<input type="number" name="inflation"></input>
	
<label for="monthly disability benefit">MONTHLY DISABILITY          BENEFIT</label>
<input type="number" name="monthly disability benefit"></input>

Answer 1

是的，这个解释也很简单，你有一个display: inline 属性，它被float: left 覆盖，因为float: left 通过设置display: block 并应用其他定位使你的元素再次成为block。

其中一个效果是浮动元素和块元素可以在一行中存在。

另一个事实是您的标签是display: block，这将导致它填满整个屏幕宽度。

接下来会发生什么，即float: left 标签的下一个元素被下推一行，标签漂浮在它旁边，占据了其余的水平空间，这将继续创建 楼梯效果 em> 你看到的。

要解决它并使输入和标签彼此相邻，您可以做的最好的事情是将每个<input> 和<label> 包装在一个带有类的<div> 中，并将float: left 应用于该div。

例如

.float-left {
    max-width: 20%; /*added this for illustration*/
    float: left;
}

label, input {
    display: block;
    padding: 4px;
}

<div class="float-left">
    <label for="start_age">START AGE</label>
    <input type="number" name="start_age" />
</div>
<div class="float-left">
    <label for="retirement_age">START AGE</label>
    <input type="number" name="retirement_age" />
</div>
<div class="float-left">
    <label for="current_income">START AGE</label>
    <input type="number" name="current_income" />
</div>
<div class="float-left">
    <label for="inflamation">START AGE</label>
    <input type="number" name="inflamation" />
</div>
<div class="float-left">
    <label for="monthly_disability_benefit">START AGE</label>
    <input type="number" name="monthly_disability_benefit" />
</div>

附言

我将字段的 for 和 name 属性更改为不再包含空格，而是使用 _（下划线）字符 - 这只是确保您的标签被正确理解。通常最好尽量避免放置这些东西的空间。

正如 cmets 中所述，我删除了结束 </input> 标签，因为 <input /> 标签是一个自闭合空标签

Answer 2

抱歉，我查看了截屏视频并看到了您需要的内容，因此我也添加了该内容。 （请参阅此答案底部的第二个 sn-p）。

1 - 6 仍然适用。

另外：

1. 在<label>的文本后添加<br/>

---

1. <inputs/> 没有结束标签

2. 如果您将<inputs> 放在<label> 中，文本将与vertical-align: baseline 一起排列（见下文）

3. 我相信for 属性只针对id，for 不与name 关联。

4. float: left 已删除，花车古朴而精致。如果使用不当，它们会导致可怕的、不合逻辑的布局混乱（就像它已经对您的布局所做的那样）。

5. 将输入的宽度设为预期内容的大小（年龄不需要 15 位）。

6. 出于美学考虑，不要使用大写字母，我使用font-variant: small-caps 增加了一些类 ;-)

相关的 CSS

label {
  display: inline-block;
  margin: 5px;
  vertical-align: baseline;
  line-height: 1.5;
  font-size: 16px;
  font-variant: small-caps;
}
input {
  display: inline-block;
  line-height: 1.5;
  padding: 0 3px;
}

我知道这个演示只是一个演示，但如果你养成了做小事的习惯，它就会成为第二天性，不会让你慢下来。

label {
  display: inline-block;
  margin: 5px;
  vertical-align: baseline;
  line-height: 1.5;
  font-size: 16px;
  font-variant: small-caps;
}
input {
  display: inline-block;
  line-height: 1.5;
  padding: 0 3px;
}
#startAge {
  width: 32px;
}
#retirementAge {
  width: 32px;
}
#currentIncome {
  width: 84px;
}
#inflation {
  width: 64px;
}
#monthlyDisabilityBenefit {
  width: 84px;
}

<label for="startAge">Start Age
<input type="number" id="startAge"></label>

<label for="retirementAge">Retirement Age
<input type="number" id="retirementAge"></label>
<br/>
<label for="currentIncome">Current Income
<input type="number" id="currentIncome"></label>
<br/>
<label for="inflation">Inflation
<input type="number" id="inflation"></label>
<br/>
<label for="monthlyDisabilityBenefit">Monthly Disability Benefit
<input type="number" id="monthlyDisabilityBenefit"></label>

label {
  display: inline-block;
  font-variant: small-caps;
}
input {
  width: 185px;
}

<label for="startAge">Start Age
  <br/>
  <input type="number" id="startAge">
</label>

<label for="retirementAge">Retirement Age
  <br/>
  <input type="number" id="retirementAge">
</label>

<label for="currentIncome">Current Income
  <br/>
  <input type="number" id="currentIncome">
</label>

<label for="inflation">Inflation
  <br/>
  <input type="number" id="inflation">
</label>

<label for="monthlyDisabilityBenefit">Monthly Disability Benefit
  <br/>
  <input type="number" id="monthlyDisabilityBenefit">
</label>

Answer 3

我希望它会有所帮助我还在每一行添加了<br>标签，以使文本框和标签垂直

input, label {
    	margin-top: 5px;
    }

    input { 
    	display: inline;
    	margin-right: 10px;
    }
 

    <label for="start age">START AGE</label><br>
    <input type="number" name="start age"></input><br><br>
    	
    <label for="retirement age">RETIREMENT AGE</label><br>
    <input type="number" name="retirement age"></input><br><br>
    	
    <label for="current income">CURRENT INCOME</label><br>
    <input type="number" name="current income"></input><br><br>
    	
    <label for="inflation">INFLATION</label><br>
    <input type="number" name="inflation"></input><br><br>
    	
    <label for="monthly disability benefit">MONTHLY DISABILITY          BENEFIT</label><br>
    <input type="number" name="monthly disability benefit"></input><br><br>