Question

只是尝试通过嵌套深度来缩进optgroup块，我尝试了一般margin-left规则，嵌套元素然后尝试应用相同的规则，尝试了padding-left ...就像这样缩进可能？看起来很简单：P

在下面的示例中，标记为“client2_a”的optgroup应缩进多于其他的，因为它嵌套在“client2”中。

Answer 1

2016年8月29日编辑

以下原始答案在现代浏览器中不再有效。对于仍然需要使用标记而不是使用HTML列表进行魔术的人，在此stackoverflow线程上找到了更好的解决方案：Rendering a hierarchy of "OPTION"s in a "SELECT" tag

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

结束修改

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

同时，您可以使用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>

希望有所帮助。

Answer 2

它比造型简单得多。答案来了我几个小时的争吵:)）。 optgroup和option标签以只读模式定义字符串。因此，要缩进任何optgroup或选项内容，只需在名称中使用简单空格或&nbsp。

就这么简单:)！

Answer 3

作为卢西恩答案的附录，较新版本的Chrome似乎不支持在文本中嵌入 。它实际上会显示＆符号等，而不是给你不间断的空间。但是，我发现使用不间断空格的unicode version仍然可以正常工作。

我使用Scala，因此能够在我的服务器端代码中使用"\u00A0"。您可能可以将unicode字符直接粘贴到您的代码中，但我不推荐它（只是因为它很难说它不是一个普通的空间）。

一个好处是Chrome至少会忽略键盘导航方面的空间。如果我有一个名为Test的选项，那么输入t仍然会将突出显示权限移到它上面，无论前面有多少个非突破空格。

Answer 4

添加到css中：

option {
text-indent: 10px; 
}

完成。

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

4 个答案: