如何在选择字段之间添加水平线

Question

如何在选择字段之间添加水平线，如下所示：

请检查彼此之间的水平线：

Answer 1

试试这个

.line {
  position: relative;
  padding-left: 10px;
}
.line:first-child {
  padding-left: 0;
}
.line select {
  position: relative;
}
.line:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: red;
}

<span class="line">
    <select>
        <option>lorem</option>
    </select>
</span>
<span class="line">
    <select>
        <option>lorem</option>
    </select>
</span>
<span class="line">
    <select>
        <option>lorem</option>
    </select>
</span>

Answer 2

您可以尝试此JSFiddle

.wrapper{
  position:relative;
}

.select2, .select1{
  height:20px;
  width:40%;
  position:absolute;
}

.select1{
  left:0;
}

.select2{
  right: 0;
}

.line{
  position:absolute;
  border-bottom: 1px solid red;
  top:10px;
  left:0;
  right:0;
}

Line的宽度与包装器的宽度相同。

<div class="wrapper">
  <div class="line">
  </div>
  <select class="select1">
    <option>1</option>
    <option>2</option>
  </select>
  <select class="select2">
    <option>1</option>
    <option>2</option>
  </select>
</div>