合わせは、私は次のコードを持っているCSS

Question

を使用してdivの内側に個別にまたがりますセレクタは同じ行にありますが、最も長いラベルテキストの最後のテキストの後にあります。したがって、この場合、すべてはProduct Rangeセレクタが始まるところから整列されます。

HTMLを変更せずにCSSだけを使用することはできますか？

Answer 1

ドロップダウン要素が同じ位置に整列されるようにするには、「label_selector」クラスの固定幅を設定できます

編集 「を表示：インラインブロック」を追加ラーフルが言ったように。次の例ではselect入力を使用しましたが、span要素も使用できます。

.label_selector { 
 
    width: 200px; 
 
    display: inline-block; 
 
}

<div id='div_selectores' class='row_titulo '> 
 
    <span class="label_selector" id="lbl_show">some text 1</span><select name="cars"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="fiat">Fiat</option> 
 
    <option value="audi">Audi</option> 
 
    </select> 
 
    <br /> 
 
    <span class="label_selector" id="lbl_summarized_by">some text long here 1</span><select name="cars"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="fiat">Fiat</option> 
 
    <option value="audi">Audi</option> 
 
    </select> 
 
    <br /> 
 
    <span class="label_selector" id="lbl_column_headers">some text really long here 1</span><select name="cars"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="fiat">Fiat</option> 
 
    <option value="audi">Audi</option> 
 
    </select> 
 
</div>