我的问题与 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 的情况下实现跨浏览器的一致缩进。
的渲染SELECT元素很大程度上取决于浏览器，您对它们的呈现几乎没有影响。某些浏览器显然允许您比其他浏览器进行更多自定义，而 IE 恰好允许很少（gasp，谁会想到；））。如果您需要非常定制SELECT元素，您需要使用 JavaScript 或重新创建一些行为类似于SELECT但是是由一堆组成的DIV和复选框或类似的东西。
话虽如此，我认为你正在寻找的是OPTGROUPs http://www.w3.org/TR/html401/interact/forms.html#h-17.6:
<select>
<optgroup label="xxx">
<option value="xxxx">xxxx</option>
....
</optgroup>
<optgroup label="yyy">
...
</optgroup>
</select>
每个浏览器都会以不同的方式显示它们，但它们将以一种独特的方式以某种方式显示。请注意，虽然在 HTML4 中你不能嵌套OPTGROUPs.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
