如何使用 CSS 缩进多级选择 optgroup？答案

【问题标题】：How to indent multiple levels of select optgroup with CSS?如何使用 CSS 缩进多级选择 optgroup？
【发布时间】：2011-07-14 09:54:07
【问题描述】：

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

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

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

【问题讨论】：

相关：stackoverflow.com/questions/1037732/…

标签： html css select indentation optgroup

【解决方案1】：

2016 年 8 月 29 日编辑

下面的原始答案在现代浏览器中不再起作用。对于那些仍然需要使用标签而不是对 HTML 列表进行魔术的人来说，在这个 stackoverflow 线程上找到了一个更好的解决方案：Rendering a hierarchy of "OPTION"s in a "SELECT" tag

我会推荐 igor-krupitsky 建议的解决方案，他建议放弃并使用二进制反而。至少在 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>

希望对您有所帮助。

【讨论】：

完全没有帮助！好的，规格是 - 不是你。感谢您指出这一点 - 是的，我想我会输出许多单级 optgroup 并为它们提供动态组织的缩进。
我最终离开了 Select。列表更具延展性:)
当前浏览器删除/移动位于其他组内的 optgroup。他们都倾向于纠正html错误。由于规范中没有这种用法，在渲染中，当出现第二个、第三个等optgroup时，会自动关闭前一个。
不确定这是否有效，但现在肯定无效

【解决方案2】：

这比造型简单得多。经过数小时的努力，我得到了答案：））。 optgroup 和 option 标签实际上是在只读模式下定义字符串。因此，要缩进任何 optgroup 或选项内容，只需在名称中使用简单的空格或 &nbsp。

就这么简单:)！

【讨论】：

我不知道你为什么会被否决，那是蹩脚的。这是一个非常聪明的技巧，事实上，它确实有效。向你致敬！
@viggity: ...并破坏了可用性。
@SébastienRenauld：当生活给你柠檬水时……你诅咒 W3C。
@Sébastien Renauld 显然，这个解决方案是不可能的，我很欣赏它而不是指责它。最后，我们在没有可用方法的情况下在网页上做的所有花哨的事情，我们都在破解它！
这个 hack 破坏了可用性。您再也无法通过键盘找到值了

【解决方案3】：

作为对 lucian 答案的补充，较新版本的 Chrome 似乎不支持在文本中嵌入 &nbsp;。它实际上会显示＆符号等，而不是给你不间断的空间。不过我发现使用不间断空格的unicode version还是可以的。

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

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

【讨论】：

【解决方案4】：

添加到 css 中：

option {
text-indent: 10px; 
}

完成。

【讨论】：