如何在 html 选择控件中添加水平线？

问题描述

如何在下拉式控件或 HTML 中的选择控件中添加水平线 (<hr> 标签)？

最佳解决方案

一般来说，这不是<select> 的一项功能，大多数浏览器对该控件的样式控制非常差。在 Firefox 中，您可以执行以下操作 (尽管在其他浏览器中不起作用)：

<select name="test">
    <option val="a">A</option>
    <option val="b" class="select-hr">B</option>
    <option val="c">C</option>
    <option val="d">D</option>
</select>

与 CSS：

option.select-hr { border-bottom: 1px dotted #000; }

但是一般来说，唯一的办法是用破折号来选择一个选项，并尝试使其不可选。

<select name="test">
    <option val="a">A</option>
    <option val="b">B</option>
    <option disabled="disabled">----</option>
    <option val="c">C</option>
    <option val="d">D</option>
</select>

参见：http://jsfiddle.net/qM5BA/283/

次佳解决方案

我以前遇到这个问题，唯一的 cross-browser 方式来实现这一点是使用 unicode 框绘制水平字符。浏览器不会在这些字符之间呈现空格。当然这也意味着你的页面必须接受 unicode(utf-8)，几乎是这几天给出的。

这是一个演示，这个使用「light horizontal」框标记：

<option value="" disabled="disabled">─────────────────────────</option>

可以使用各种 unicode 框字符选项作为分隔符，它们之间不应有空格：

“─”，”━”，”┄”，”┅”，”┈”，”┉”

更多关于 unicode 框绘图字符在这里：http://www.duxburysystems.com/documentation/dbt11.2/miscellaneous/Special_Characters/Unicode_25xx.htm

您还可以使用 HTML 转义字符来包含它们 (复制和粘贴通常可以通过插入框字符’UTF-8 序列，哪些浏览器似乎尊重，但是这不是一个选项)，这对于一行中的四个轻水平框标记：

& 安培;＃X2500;& 安培;＃X2500;& 安培;＃X2500;& 安培;＃X2500;

它呈现为

────

第三种解决方案

select 元素可能只包含 optgroup 或 option 元素，option 元素只能包含文本。标记如<hr> 是禁止的。

我会使用这样一个元素创建一个分隔符：

<option disabled role=separator>

你可以考虑这样的标记：

<optgroup label="-------"></optgroup>

然而，不同浏览器之间的渲染变化有点太多了，不能接受。

第四种方案

你可以使用”—” 。每个角色之间没有可见的空格。在 HTML 中：

<option value disabled>—————————————</option>

或在 XHTML 中

<option value="" disabled="disabled">—————————————</option>

第五种方案

<option>----------</option>

要么

<option>__________</option>

但是你不能写<option><hr /></option>

您还可以使用背景图像将 css 类添加到空的<option> 中

<option class="divider"> </option>

参考文献

How do I add a horizontal line in a html select control?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何在 html 选择控件中添加水平线？