代码之家 › 专栏 › 技术社区 › XMehdi01

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

horizontal-line label grid input css

XMehdi01 · 技术社区 · 3 年前

我想做一个包含 label 和 input 隔着 中间点着的水平线。
与描述字段类似: 我用过的网格具有 span (这是一条水平线)并给出 1fr 占据所有的空间 标签 和 输入 ;
这就是我迄今为止所尝试的:

.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 回复 | 直到 3 年前

Gabriel Nuñez de Andrade 3 年前

我用flex box和 align-items: center 而不是网格

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

并在跨度上添加了X轴边距

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

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

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

推荐文章

Thinkpad · Excel引用基于字符串的范围

2 年前

DwightD · Python 3中的用户输入和排序列表

6 年前

Hans Daigle · Python交互式控制台使用curses lib getstr()函数不等待用户输入

6 年前

ÐÐ¸ÐºÐ¸ÑÐ° Ð¨Ð¸ÑÐºÐ¸Ð½ · 如何从字符串(Python3)创建函数[已关闭]

6 年前

Wacky Mode-On · Python:3-在找到关键字后将字符串设为变量?

6 年前

P S · 在laravel 5.5中输入不起作用时重定向回

6 年前

Paul · 如何在输入值中包含图像

6 年前

Mose · c++中带有输入函数的Lambda auto给出错误

6 年前

Henri Wurm · 首先将第一个输入保存到文件夹中,然后引用它

6 年前

Andres Concha · 如何使用Vue设置和获取输入组件的值。js?

6 年前