如何使用CSS缩进选择optgroup的多个级别？

Z时代
2024-01-10
分类：问答

只是真的尝试通过嵌套深度缩进optgroup块，我已经尝试了一个通用margin-

left规则，先嵌套元素，然后尝试应用相同的规则，然后尝试padding-left…这样缩进吗？看来基本的：P

在以下示例中，标有“ client2_a”的optgroup应该比其他缩进更多，因为它嵌套在“ client2”中。

回答：

以下原始答案在现代浏览器中不再起作用。对于那些仍然需要使用标签而不是对HTML列表做魔术的人，在此线程上找到了一个更好的解决方案：在“SELECT”标签中呈现“OPTION”的层次结构

我会推荐igor-krupitsky建议的解决方案，他建议删除＆nbsp;并使用二进制＆＃160;代替。至少在Chrome上，使用键盘在列表中找到项目的第一个字符不会中断。

当前的HTML规范没有为嵌套标签提供任何功能（例如缩进）。。

同时，您可以使用CSS手动设置关卡样式。我尝试在示例中使用样式，但是由于某些原因，样式无法正确呈现，因此至少可以使用以下样式：

<select name="select_projects" id="select_projects">
        <option value="">project.xml</option>
        <optgroup label="client1">
            <option value="">project2.xml</option>
        </optgroup>
        <optgroup label="client2">
            <option value="">project5.xml</option>
            <option value="">project6.xml</option>
            <optgroup label="client2_a">
                <option value="" style="margin-left:23px;">project7.xml</option>
                <option value="" style="margin-left:23px;">project8.xml</option>
            </optgroup>
            <option value="">project3.xml</option>
            <option value="">project4.xml</option>
       </optgroup>
       <option value="">project0.xml</option>
       <option value="">project1.xml</option>
    </select>