如何缩进选择optgroup的多个级别与CSS？ [英] How to indent multiple levels of select optgroup with CSS?

问题描述

只是尝试通过嵌套深度缩进optgroup块，我试过一个一般的 margin-left 规则，嵌套元素然后尝试应用相同的规则，尝试 padding-left ...缩进这样可能吗？它似乎基本：P

在下面的示例中，标记为'client2_a'的optgroup应该比其他的缩进，因为它嵌套在'client2' p>

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

解决方案

8/29/2016编辑

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

我会推荐 igor建议的解决方案-krupitsky 谁建议放弃&并使用二进制&＃160;代替。

结束编辑 使用键盘来查找列表中的项目的第一个字符。 p>

当前HTML规范不提供添加任何功能（例如缩进）的嵌套标记。请参见此链接。

同时，您可以使用CSS手动为您的级别设置样式。我试着在你的示例中使用样式，但由于某些原因，他们没有正确显示，所以至少以下将工作：

 < select name =select_projectsid =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>  

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

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 Edit

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

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.

End Edit

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

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>

Hope that helps.

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