14

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

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

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

4

4 回答 4

22

2016 年 8 月 29 日 编辑

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

我会推荐igor-krupitsky建议的解决方案，他建议放弃   并使用二进制   反而。至少在 Chrome 上，这不会中断使用键盘查找列表中项目的第一个字符。

结束编辑

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

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

希望有帮助。

于 2011-04-22T01:39:50.830 回答
16

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

就是这么简单:)！

于 2012-02-27T18:34:47.270 回答
5

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

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

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

于 2014-05-20T15:06:35.347 回答
0

添加到 css 中：

option {
text-indent: 10px; 
}

完毕。

于 2016-04-29T15:51:07.187 回答