23

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

4

7 回答 7

48

元素的呈现SELECT很大程度上取决于浏览器，你对它们的呈现几乎没有影响。某些浏览器显然允许您比其他浏览器进行更多的自定义，而 IE 恰好允许的很少（喘气，谁会有 thunk ;)）。如果您需要非常自定义SELECT的元素，则需要使用 JavaScript 或重新创建行为类似于 aSELECT但由一堆DIVs 和复选框或其他扩展的东西。

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

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

每个浏览器都会以不同的方式显示它们，但它们将以一种或另一种方式以独特的方式显示。请注意，虽然在 HTML4 中正式你不能嵌套OPTGROUPs。

于 2009-07-18T05:38:55.340 回答
23

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

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

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

于 2009-07-18T05:59:16.563 回答
13

只是为了访问者，我觉得我应该分享我设计的这个解决方案：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());
        }
   );

 }
);

这可以扩展到任何级别

于 2012-07-22T13:20:18.313 回答
3

尝试使用  

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

于 2016-04-06T06:25:57.597 回答
2

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

如果问题是您只有一个数据库字段来存储它们，为什么不使用三个单独的选择框（使 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>
于 2009-07-18T11:19:52.720 回答
1

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

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

（&nbsp;对我不起作用，因为我正在使用一个用于花哨的选择框的库，可以逐字注入它们。）

于 2017-05-17T15:58:03.793 回答
1

前置非破坏空间 ( ) 对我不起作用。

我添加了以下内容：

String.fromCharCode(8194);

于 2018-08-28T08:03:17.953 回答