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黑客的情况下在浏览器中实现一致的缩进。

Answer 1

SELECT元素的呈现在很大程度上取决于浏览器，您对其呈现的影响很小。有些浏览器显然允许你比其他浏览器更多的自定义，IE恰好允许很少（喘气，谁有thunk;））。如果您需要非常自定义的SELECT元素，则需要使用JavaScript或重新创建行为类似SELECT的内容，但它由一堆DIV和复选框或其他内容组成到那个时候。

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

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

每个浏览器都会以不同的方式显示它们，但它们会以某种方式以独特的方式显示。请注意，虽然在HTML4中正式使用，但您无法嵌套OPTGROUP s。

Answer 2

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

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

它远非漂亮，但如果optgroup没有，它可能适合你。

Answer 3

为了游客的利益，我觉得我应该分享我设计的解决方案：http://jsfiddle.net/n9qpN/

用级别类

装饰选项

<select name="hierarchiacal">
<option class="level_1">United States</option>
    <option class="level_2">Hawaii</option>
        <option class="level_3">Kauai</option>
    <option class="level_2">Washington</option>
        <option class="level_3">Seattle</option>
        <option class="level_3">Chelan</option>
</select>

我们现在可以使用jQuery重新格式化select元素的内容

$(document).ready(
function(){
   $('.level_2').each(
        function(){
            $(this).text('----'+$(this).text());
        }
   );

   $('.level_3').each(
        function(){
            $(this).text('---------'+$(this).text());
        }
   );

 }
);

这可以扩展到任何级别

Answer 4

这种分组方法不是创造了比它解决的更多问题吗？作为用户，我应该选择哪一个？选择比国家更具体的东西有什么好处吗？

如果问题是你只有一个数据库字段来存储它们，为什么不有三个单独的选择框（2或3个可选）并且只存储最具体的？：

<select name="country">
    <option>Choose a country</option>
    <option>United States</option>
</select>
<select name="state">
    <option>Choose a state</option>
    <option>Hawaii</option>
</select>
<select name="city">
    <option>Choose a city</option>
    <option>Kauai</option>
</select>

Answer 5

尝试使用＆amp;＃160;

＆＃13;

<select name="Something">
  <option>United States</option>
  <option>&#160;Hawaii</option>
  <option>&#160;&#160;Kauai</option>
  <option>&#160;Washington</option>
  <option>&#160;&#160;Seattle</option>
  <option>&#160;&#160;Chelan</option>
</select>

＆＃13;

Answer 6

使用不间断空格（＆nbsp）对我不起作用。

我将以下内容作为前提：

String.fromCharCode(8194);

Answer 7

我能够使用NO-BREAK SPACE unicode字符完成此操作。 http://www.fileformat.info/info/unicode/char/00a0/index.htm

将该页面中的字符复制粘贴到代码中并瞧瞧： https://jsfiddle.net/fwillerup/r9ch988h/

（ 对我不起作用，因为我正在使用一个库来选择那些会逐字注入它们的精选框。）

在“SELECT”标记中渲染“OPTION”的层次结构

7 个答案: