どのように私は次のように私が選択フィールド間の水平線を追加するにはどうすればよい選択フィールド

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>