显示单独的行而不是边框

Question

我不确定如何制作如此图所示的单独一行。

这就是我在做的事情：

.separate-line {
    background-color: #D8D9DE;
    border-width: 0;
    color: #D8D9DE;
    height: 1px;
}

我添加了这个html来显示边框线：

<div>
<hr class="separate-line">
<input...>
</div>

结果显示正常边框。但我想显示一条单独的水平线。

Answer 1

如果您希望创建一个双色/单独排列的<hr>，这是您可以这样做的方式

如果放大关闭，可以看到线条上半部分和下半部分之间的颜色差异

我添加了较暗的背景，因此您可以注意到颜色的差异

＆＃13;

＆＃13;

.separate-line {
    background-color: #fff;
    color:#fff;
    height: 2px;
    border:0;
    border-top:2px solid #aaa;
}

input {
  width: 96%;
  margin-left:2%;
}

body {
  background-color: #ddd;
}

＆＃13;

<div>
  <hr class="separate-line">
  <input type="text">
</div>

＆＃13;

＆＃13;

＆＃13;

对于 Firefox （某些原因必须加倍hr小时）：

＆＃13;

＆＃13;

.separate-line {
    background-color: #fff;
    color:#fff;
    height: 4px;
    border:0;
    border-top:2px solid #aaa;
}

input {
  width: 96%;
  margin-left:2%;
}

body {
  background-color: #ddd;
}

＆＃13;

<div>
  <hr class="separate-line">
  <input type="text">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您好试试这个可能会帮助您，因为您需要一个单独的边框。

 hr {
display: block;
border-style: inset;
border-width: 2px;
background-color: #D8D9DE;
 }

您可以使用border-width:

增加边框