在“SELECT”中呈现“OPTION”的层次结构标签 [英] Rendering a hierarchy of "OPTION"s in a "SELECT" tag

问题描述

我的问题是HTML和CSS相关。我有一个层次结构类型的结构，我想在列表中显示。我希望在选择列表中显示列表，每个项目类型（国家，州，城市，州和城市）（这是三个深度）。城市）必须是可选择的。这些项目应该显示为：

 美国
  - 夏威夷
  - 考艾岛
 - 华盛顿
  - 西雅图
  -  Chelan 
  

问题在于缩进。我试图使用margin-left或padding-left缩进标签，这些标签在FireFox中显示正确，但在IE7中不显示。这是生成的选择列表的示例：

 < select name =Something> 
< option style =padding-left：0>美国< / option> 
< option style =padding-left：20px>夏威夷< / option> 
< option style =padding-left：40px>考爱岛< / option> 
< option style =padding-left：20px>华盛顿< / option> 
< option style =padding-left：40px> Seattle< / option> 
< option style =padding-left：40px> Chelan< / option> 
< / select> 
  

我想在不使用CSS hacks的情况下实现跨浏览器的一致缩进。

解决方案

deceze的方式更好，是我的第一个想法。作为替代方案，如果这不起作用，您可以在标记值中使用不间断空格：

 < select> ; 
< option>选择我< / option> 
< option>& nbsp; me indented< / option> 
< option>& nbsp;& nbsp;甚至更多缩进< / option> 
< / select> 
  

这很不美观，但如果optgroup不适用，它可能适用于您。

My problem is HTML and CSS related. I have a hierarchy type structure that I want to display inside a list. The hierarchy contains Countries, States and Cities (it is three levels deep).

I want to display the list inside a select list, each item type (Country, State, City) must be selectable. The items should appear indented as:

United States
- Hawaii
-- Kauai
- Washington
-- Seattle
-- Chelan

The problem is with the indentation. I am trying to use either margin-left or padding-left to indent the tags, which appear correct in FireFox but not in IE7. This is an example of the generated select list:

<select name="Something">
<option style="padding-left: 0">United States</option>
<option style="padding-left: 20px">Hawaii</option>
<option style="padding-left: 40px">Kauai</option>
<option style="padding-left: 20px">Washington</option>
<option style="padding-left: 40px">Seattle</option>
<option style="padding-left: 40px">Chelan</option>
</select>

I want to achieve consistent indentation across browsers without using CSS hacks.

解决方案

deceze way is much better and was my first idea. As an alternative if that doesn't work is that you can use non-breaking spaces in the tag value:

<select>
    <option>select me</option>
    <option>&nbsp;me indented</option>
    <option>&nbsp;&nbsp;even more indentation</option>
</select>

It's far from pretty but it might work for you if the optgroup doesn't.

这篇关于在“SELECT”中呈现“OPTION”的层次结构标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！