Html 如何使用 CSS 缩进多个级别的 select optgroup？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5288792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to indent multiple levels of select optgroup with CSS?
提问by danjah
Just trying to indent optgroup blocks by nesting depth really, I've tried a general margin-leftrule, nested elements then trying to apply the same rule, tried padding-left... is indenting like this possible? It seems elementary :P
只是试图通过嵌套深度来缩进 optgroup 块，我已经尝试了一个通用margin-left规则，嵌套元素然后尝试应用相同的规则，尝试过padding-left......这样的缩进可能吗？看起来很初级：P
In the example below, the optgroup labelled 'client2_a' should be indented more than the others, because it is nested inside 'client2'.
在下面的示例中，标记为“client2_a”的 optgroup 应比其他选项缩进更多，因为它嵌套在“client2”内。
回答by eliel
8/29/2016 Edit
8/29/2016 编辑
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
下面的原始答案在现代浏览器中不再起作用。对于那些仍然需要使用标签而不是使用 HTML 列表进行魔术的人，在此 stackoverflow 线程上找到了更好的解决方案：Rendering a hierarchy of "OPTION"s in a "SELECT" tag
I would recommend the solution suggested by igor-krupitskywho 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.
我会推荐igor-krupitsky建议的解决方案，他建议删除 并使用二进制 反而。至少在 Chrome 上，使用键盘查找列表中项目的第一个字符不会中断。
End Edit
结束编辑
The current HTML specification does not provide for nested tags adding any functionality (such as indentation). See this link.
当前的 HTML 规范不提供添加任何功能（例如缩进）的嵌套标签。请参阅此链接。
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:
同时，您可以使用 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>Hope that helps.
希望有帮助。
回答by lucian
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  .
这比造型简单得多。经过几个小时的挣扎，我得到了答案:))。optgroup 和 option 标签实际上是以只读模式定义字符串。因此，为了缩进任何 optgroup 或选项内容，您只需在名称或 .
It's that simple :) !
就是这么简单:)！
回答by ShawnFumo
As an addendum to lucian's answer, newer versions of Chrome don't seem to support having embedded in the text. It will actually show the ampersand etc instead of giving you the non-breaking space. However, I found that using the unicode versionof the non-breaking space will still work ok.
作为 lucian 答案的附录，较新版本的 Chrome 似乎不支持 嵌入到文本中。它实际上会显示＆符号等，而不是给你不间断的空间。但是，我发现使用不间断空格的unicode 版本仍然可以正常工作。
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).
我正在使用 Scala，因此能够"\u00A0"在我的服务器端代码中使用。您可能可以将 unicode 字符直接粘贴到您的代码中，但我不推荐它（只是因为很难说它不是一个正常的空间）。
One nice thing is that Chrome at least will ignore the spaces in terms of keyboard navigation. If I have an option named Test, typing tstill will move the highlight right to it, no matter how many non-breaking spaces prepend it.
一件好事是 Chrome 至少会忽略键盘导航方面的空格。如果我有一个名为 的选项Test，t无论前面有多少不间断的空格，键入仍然会将突出显示向右移动。
回答by FollaPijas
Add to the css this:
添加到CSS这个：
option {
text-indent: 10px;
}
Done.
完毕。
