无法弄清楚如何将文本水平对齐到输入的左侧

Question

这是一个非常初学者的问题，但我一直在努力找出一种方法，将姓名，电子邮件和年龄与输入字段的左侧对齐。然后让它以输入框为中心。

这是我 codepen.io 的链接

我尝试将文本浮动到左侧并使输入显示为块。输入似乎卡在极宽的宽度上，这使得文本无法正确显示。如果我设法缩小框的宽度，并想调整填充，它会使输入框更大！而不是向左或向右移动文本和输入。

#text-label {
width: 50%;
}
#text-input {
width: 40%;
display: block;
margin: auto;
}
#email-input {
width: 80%;
display: block;
margin: auto;
}
#number-input {
width: 80%;
display: block;
margin: auto;
}

<div id="name-email-age">
<div id="name" class="center">
<label id="text-label">
* Name:
</label>
<input id="text-input" type="text" name="Enter your name" placeholder="Enter your name" required />
<div id="email" class="center">
<label id="email-label">
* Email:
</label>
<input id="email-input" type="email" name="Enter your email" placeholder="Enter your Email" required />
</div>
<div id="age" class="center">
<label id="age-label">
* Age:
</label>
<input id="number-input" type="number" name="Enter your age" placeholder="Enter your Age" required max="122" min="5" />
</div>
</div>

Answer 1

将输入显示样式更改为inline-block。

https://codepen.io/AustinGordon/pen/yEodLo

Answer 2

也许你可以试试这个：

将标签和控件换行在 .control-group 中以获得最佳间距 并将框更改为理想大小 =(。

#text-label {
width: 50%;
}
#text-input {
width: 50%;
display: block;
}
#email-input {
width: 100%;
display: block;
}
#number-input {
width: 100%;
display: block;
}
.control-group {
width: 80%;
margin: auto;
text-align: left;
}

<div id="name-email-age">
<div id="name" class="center">
<div class="control-group">
<label id="text-label">* Name:</label>
<input id="text-input" type="text" name="Enter your name" placeholder="Enter your name" required />
</div>
</div>
<div id="email" class="center">
<div class="control-group">
<label id="email-label">* Email:</label>
<input id="email-input" type="email" name="Enter your email" placeholder="Enter your Email" required />
</div>
</div>
<div id="age" class="center">
<div class="control-group">
<label id="age-label">* Age:</label>
<input id="number-input" type="number" name="Enter your age" placeholder="Enter your Age" max="122" min="5" required />
</div>
</div>
</div>