如何使用 CSS 缩进多个级别的 select optgroup? [英] How to indent multiple levels of select optgroup with CSS?

问题描述

只是试图通过嵌套深度来缩进 optgroup 块，我尝试了一般的 margin-left 规则，然后嵌套元素尝试应用相同的规则，尝试了 padding-left... 可以这样缩进吗?看起来很初级:P

Just trying to indent optgroup blocks by nesting depth really, I've tried a general margin-left rule, nested elements then trying to apply the same rule, tried padding-left... is indenting like this possible? It seems elementary :P

在下面的示例中，标记为client2_a"的 optgroup 应比其他选项缩进更多，因为它嵌套在client2"内.

In the example below, the optgroup labelled 'client2_a' should be indented more than the others, because it is nested inside 'client2'.

http://jsfiddle.net/Tb5Rc/5/

推荐答案

8/29/2016 编辑

下面的原始答案在现代浏览器中不再有效.对于那些仍然需要使用标签而不是对 HTML 列表进行魔术的人，在此 stackoverflow 线程中找到了更好的解决方案:在SELECT"中呈现OPTION"的层次结构标签

The original answer below is no longer functional in modern browsers. For those who still need to use a tag instead of doing magic with HTML lists, a better solution was found on this stackoverflow thread: Rendering a hierarchy of "OPTION"s in a "SELECT" tag

我会推荐 igor-krupitsky 建议的解决方案，他建议放弃  并使用二进制  反而.至少在 Chrome 上，使用键盘查找列表中项目的第一个字符不会中断.

I would recommend the solution suggested by igor-krupitsky who suggests dropping   and using the binary   instead. At least on Chrome, this does not break using the keyboard to find the first character of an item in the list.

结束编辑

当前的 HTML 规范不提供添加任何功能(例如缩进)的嵌套标签.请参阅此链接.

The current HTML specification does not provide for nested tags adding any functionality (such as indentation). See this link.

同时，您可以使用 CSS 手动设置关卡样式.我尝试在您的示例中使用样式，但由于某种原因它们没有正确呈现，因此至少以下内容会起作用:

In the mean time, you can manually style your levels with CSS. I tried using styles in your sample, but for some reason they did not render correctly, so at the very least the following will work:

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

希望有所帮助.

这篇关于如何使用 CSS 缩进多个级别的 select optgroup?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！