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

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 使你的元素成为 block 再次设置 display: block 并应用其他定位。

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

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

接下来会发生什么是下一个元素，它是一个 float: left 标签被向下推到一行并且标签漂浮在它旁边占据水平 space 的其余部分，这将继续创建您看到的阶梯效应。

要解决它并让输入和标签彼此相邻，您可以做的最好的事情是将每个 <input> 和 <label> 包装在 <div> 中，并带有 class 并将 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>

P.S.

我将字段的 for 和 name 属性更改为不再有白色 space，而是使用 _（下划线）字符 - 这只是为了确保您的标签得到正确理解。尽可能避免使用 space 这类东西通常是个好主意。

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

Answer 2

我希望它会有所帮助我还在每一行添加了 <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>

Answer 3

糟糕，抱歉，我看了截屏视频，看到了您需要的内容，所以我也添加了它。（请参阅此答案底部的第二个片段）。

1 - 6 仍然适用。

另外：

在<label>

<br/>

<inputs/>
如果您将 <inputs> 放在 <label> 中，文本将与 vertical-align: baseline 一起排列（见下文）
我认为 for 属性仅针对 id，for 与 name 无关。
float: left删除，花车古朴精致。如果使用不当，它们会导致可怕的不合逻辑的布局混乱（因为它已经对你的布局造成了影响）。
将输入的宽度设为预期内容的大小（年龄不需要 15 位数字）。
为了美观，不要使用大写字母，我使用 font-variant: small-caps 添加了一点 class ;-)

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

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

My inputs and labels aren't inline

html

css

input

labels

P.S.