在“ SELECT”标签中呈现“ OPTION”的层次结构

一尘不染

在“ SELECT”标签中呈现“ OPTION”的层次结构

css

我的问题是与HTML和CSS有关。我有一个要显示在列表中的层次结构类型结构。层次结构包含国家，州和城市（深度为三个层次）。

我想在选择列表中显示该列表，每个项目类型（国家，州，城市）必须是可选的。这些项目应缩进为：

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

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

<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>

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

阅读 434

2020-05-16

共1个答案

一尘不染

减法更好，这是我的第一个想法。或者，如果不起作用，则可以在标记值中使用不间断空格：

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

它远非漂亮，但如果optgroup不起作用，它可能对您有用。

2020-05-16