如何使水平线分隔标签和输入?
Posted
技术标签:
【中文标题】如何使水平线分隔标签和输入?【英文标题】:How to make horizontal line seperate label and input? 【发布时间】:2022-01-24 02:21:56 【问题描述】:我想创建一个包含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>
但它似乎与上图中所需的输出不完全相同,任何关于如何制作水平线的建议都非常感谢!
【问题讨论】:
【参考方案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);
...
【讨论】:
感谢您的回答,使用flex
的好方法;你能猜出一个关于在所附图片中label
使用的font-family
的问题吗?
您可以尝试上传图片here 以及您为您提供此图片可能的字体的网站。以上是关于如何使水平线分隔标签和输入?的主要内容,如果未能解决你的问题,请参考以下文章