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

试图通过嵌套深度缩进optgroup块真的，我试过一般的margin-left规则，嵌套元素然后试图应用相同的规则，试过padding-left ...是缩进这样的可能吗？这似乎是基本的：P如何使用CSS缩进多个级别的select optgroup？

在下面的例子中，标记为'client2_a'的optgroup应该缩进比其他更多，因为它嵌套在'client2'内部。

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

来源

2011-03-13 danjah

2016年8月29日编辑

下原来的答案不再是在现代浏览器的功能。对于那些谁仍然需要使用一个标签，而不是做与HTML列表魔术，较好地解决了这个计算器线程发现：Rendering a hierarchy of "OPTION"s in a "SELECT" tag

我会建议由igor-krupitsky建议的解决方案谁建议下探& NBSP;并使用二进制代码&＃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>

希望有所帮助。

来源

2011-04-22 01:39:50 eliel

彻底无益！好的，规范是 - 不是你。感谢您指出 - 是的，我想我会输出许多单级optgroups，并给他们动态组织的缩进。 – danjah 2011-05-12 12:09:22

我最终离开了Select。列表更加可塑:) – danjah 2012-02-16 21:10:42

这根本不起作用。试用GC30和IE10。 – user323094 2013-10-12 21:44:48

它比造型简单得多。答案在我苦苦挣扎之后来到了我身上:)）。 optgroup和option标签以只读模式定义字符串，actualy。因此，要缩进任何optgroup或选项内容，只需在名称中使用简单的空格或&nbsp。

就是这么简单:)！

来源

2012-02-27 18:34:47 lucian

我不知道你为什么会被拒绝投票，这是跛脚。这实际上是一个非常聪明的黑客工作。赞美你！ – viggity 2012-08-15 21:16:42

@viggity：...并打破可用性。 – 2013-02-15 16:24:46

@SébastienRenauld：当生活给你柠檬水......你骂W3C。 – sergserg 2014-02-22 19:32:20

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

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

一件好事就是Chrome至少会忽略键盘导航方面的空间。如果我有一个名为Test的选项，输入t仍然会将突出显示移动到该选项，无论有多少非打破空格预先设置它。

来源

2014-05-20 15:06:35 ShawnFumo

-1

加入的CSS这样的：

option { 
text-indent: 10px; 
}

完成。

来源

2016-04-29 15:51:07 FollaPijas

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

回答

相关问题