如何使用CSS缩进多级select optgroup？
只是尝试通过嵌套深度缩进 optgroup 块，我尝试了一般的 margin-left 规则，嵌套元素然后尝试应用相同的规则，尝试了 padding-left ...这样的缩进可能吗？看起来很简单：P
在下面的示例中，标记为“client2_a”的 optgroup 应该比其他组缩进更多，因为它嵌套在“client2”内。
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'.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
8/29/2016 编辑
下面的原始答案在现代浏览器中不再起作用。对于那些仍然需要使用标签而不是对 HTML 列表进行魔法的人，在此 stackoverflow 线程上找到了更好的解决方案： 在“SELECT”标签中渲染“OPTION”的层次结构
我会推荐 igor-krupitsky 建议放弃并使用二进制 反而。至少在 Chrome 上，这不会中断使用键盘查找列表中项目的第一个字符。
结束编辑
当前的 HTML 规范不提供添加任何功能（例如缩进）的嵌套标记。请参阅此链接。
同时，您可以使用 CSS 手动设置关卡样式。我尝试在示例中使用样式，但由于某种原因它们无法正确渲染，因此至少以下内容可以工作：
希望有帮助。
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:
Hope that helps.
这比造型简单得惊人。经过几个小时的挣扎后我得到了答案:)）。实际上，optgroup 和 option 标签正在以只读模式定义字符串。因此，要缩进任何 optgroup 或选项内容，只需在名称或
就这么简单:)！
It's amazingly simple than styling. The answer came to me afte hours of strugling :)) . The optgroup and option tags are defining strings in read-only mode, actualy. So for you to indent any of the optgroup or option content, you just use simple space in the names or
It's that simple :) !
作为 lucian 答案的附录，较新版本的 Chrome 似乎不支持在文本中嵌入
我使用的是 Scala，因此可以在我的服务器端代码中包含
"\u00A0"。您可能可以将 unicode 字符直接粘贴到您的代码中，但我不会推荐它（只是因为很难判断它不是一个正常的空格）。一件好事是 Chrome 至少会忽略键盘导航方面的空格。如果我有一个名为
Test的选项，输入t仍然会将突出显示向右移动，无论它前面有多少个不间断空格。As an addendum to lucian's answer, newer versions of Chrome don't seem to support having
I'm using Scala so was able to just have
"\u00A0"in my server-side code. You probably could paste the unicode character directly into your code but I wouldn't recommend it (just because it'd be so hard to tell that it isn't a normal space).One nice thing is that Chrome at least will ignore the spaces in terms of keyboard navigation. If I have an option named
Test, typingtstill will move the highlight right to it, no matter how many non-breaking spaces prepend it.添加到CSS：
完成。
Add to the css this:
Done.