html - 如何在标签和输入之间添加空格并使输入在同一行中到达容器的右边缘？

Question

我是 html/CSS 的新手，我似乎无法找到如何在标签和输入之间添加间距，同时使输入延伸到其封闭容器的右边缘并同时具有标签和输入在同一行。

到目前为止我有:

label {
 text-align: right;
 clear: both;
 float:left;
 margin-right:25px;
}
input {
  width: 100%;
}

<div class="container">
    <form action="home.html">
    <label for="label">Label:</label>
    <input type="text" id="rcorners1" name="field_name">
	<input type="submit" value="submit" class="btn btn-primary btn-block">
	</form>
</div>

这使得标 checkout 现在输入上方，这是有道理的，因为我将宽度设置为 100%。什么是好的解决方案？我不想将宽度设置为特定的像素大小，而是让宽度始终从标签延伸到容器的右边缘，无论标签本身的大小如何。

我知道以前可能有人问过类似的问题，但我找不到解决方案，非常感谢您的帮助。

Answer 1

你可以试试:

label {
 text-align: right;
 float:left;
 margin-right:25px;
 width:100px;
}
input {
  width: calc(100% - 150px);
  float:left;
}

用你的 HTML

<label for="label">Label:</label>
<input type="text" id="rcorners1" name="field_name">

查看 jsfiddle

注意:你可以随意设置标签的with