如何添加選擇字段

Question

之間的水平線如何添加選擇字段之間的水平線如下：

請檢查相互之間的水平線：

Answer 1

你可以試試這個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; 
} 

線的寬度與包裝的寬度相同。

<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> 

Answer 2

試試這個

.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>