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

Posted

技术标签:

【中文标题】如何使水平线分隔标签和输入?【英文标题】:How to make horizontal line seperate label and input? 【发布时间】:2022-01-24 02:21:56 【问题描述】:

我想创建一个包含labelinput 的字段,由一条居中的水平线分隔。 像描述字段: 我尝试使用 gridspan(这是一条水平线)并给它 1fr 以占用 labelinput 之间的所有空间; 这就是我到目前为止所尝试的:

.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 以及您为您提供此图片可能的字体的网站。

以上是关于如何使水平线分隔标签和输入?的主要内容,如果未能解决你的问题,请参考以下文章

在VB中如何能使用户可以text控件中输入(Tab)这样的分隔符?

如何添加垂直分隔符?

如何显示水平和垂直渐变分隔线?

尾随分隔符使熊猫 read_csv 感到困惑

Laravel 验证 - 逗号分隔的字符串输入为数组

如何在动态创建的 ContextMenu 中添加水平分隔符?