如何使水平线分隔标签和输入？

Question

我想创建一个包含label 和input 的字段，由一条居中的水平线分隔。
像描述字段： 我尝试使用 grid 和 span（这是一条水平线）并给它 1fr 以占用 label 和 input 之间的所有空间；
这就是我到目前为止所尝试的：

.field {
  display: grid;
  grid-template-columns: 20% 1fr 40%;
  font-family: "Segoe UI";
}
.field span {
  height: 0px;
  width: 100%;
  border: 4px dotted gray;
  border-top: 10px;
}
label {
  text-transform: capitalize;
  font-size: 1.5rem;
  color: rgb(65, 65, 65);
}
input {
  outline: 1px solid rgb(81, 81, 81);
  border: none;
  color: rgb(81, 81, 81);
  font-size: 1.6rem;
  padding: 3px;
}
input:focus {
  outline: 1.3px solid rgb(0, 131, 143);
}

<div class="field">
  <label for="Description"> Description </label>
  <span></span><!--This is horizontal dotted line -->
  <input type="text" id="Description" />
</div>

但它似乎与上图中所需的输出不完全相同，任何关于如何制作水平线的建议都非常感谢！

Answer 1

我使用带有 align-items: center 的 flex-box 而不是网格

.field {
  display: flex;
  align-items: center;
  ...
}

并为跨度添加了 X 轴边距

.field span {
  margin: 0 16px;
  ...
}

您还可以更改跨度边框颜色的不透明度，使其更接近您附加的图像

.field span {
  border: 4px dotted rgba(128, 128, 128, 0.23);
  ...
}