html - 在 "OPTION"标记中呈现 "SELECT"的层次结构

Question

我的问题与 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 的情况下实现跨浏览器的一致缩进。

Answer 1

SELECT 元素的呈现很大程度上取决于浏览器，您对其呈现的影响很小。有些浏览器显然比其他浏览器允许您进行更多的自定义，而 IE 恰好允许的很少(gasp，谁会想 ;))。如果您需要非常自定义的 SELECT 元素，您需要使用 JavaScript 或重新创建一些行为类似于 SELECT 但由一堆 DIV 组成的东西s 和复选框或扩展的东西。

话虽如此，我认为您正在寻找的是 OPTGROUPs :

<select>
  <optgroup label="xxx">
    <option value="xxxx">xxxx</option>
    ....
  </optgroup>
  <optgroup label="yyy">
    ...
  </optgroup>
</select>

每个浏览器都会以不同方式显示它们，但它们会以一种或另一种方式以独特的方式显示。请注意，尽管在 HTML4 中您不能嵌套 OPTGROUP。