使用CSS在div内部单独对齐跨度

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标签及其选择器如下所示：

我想将选择器对齐在同一行但是在最长标签文本的最后一个文本之后，所以在这种情况下，所有选择器都将从Product Range选择器的位置开始对齐。

是否可以在不更改HTML的情况下仅使用CSS？

Answer 1

您可以为＆＃39; label_selector＆＃39;设置固定宽度。 class，所以下拉元素将在同一位置对齐：

修改 添加＆＃39;显示：内联块＆＃39;正如拉胡尔所说。我在以下示例中使用了select输入，但span元素也可以使用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;