對準裏面的div使用CSS

Question

分別跨越我有以下代碼：

<div id='div_selectores' class='row_titulo '> 
    <span class="label_selector" id="lbl_show"></span><span id="div_selector_show"></span> 
    <br /> 
    <span class="label_selector" id="lbl_summarized_by"></span><span id="div_selector_summarized"></span> 
    <br /> 
    <span class="label_selector" id="lbl_column_headers"></span><span id="div_selector_headers"></span> 
</div> 

，我顯示了使用span其選擇的標籤，像這樣：

我想對齊選擇器在同一行上，但是在最長標籤文本的最後文本之後，因此在這種情況下，所有選擇器都將從「產品範圍」選擇器所在的位置開始對齊。

是否可以只使用CSS而不更改HTML？

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>