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

问题描述 投票:56回答:9

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

html
9个回答
68
投票

一般来说,这不是<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/


33
投票

我以前遇到过这个问题,唯一的跨浏览器方法是使用unicode框绘制水平字符。浏览器不会在这些字符之间渲染空格。当然,这也意味着您的页面必须接受unicode(utf-8),这几天几乎是给定的。

这是一个演示,这个使用“light horizontal”框标记:

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

您可以使用各种unicode box字符选项作为分隔符,它们之间应该没有空格来呈现:

"─", "━", "┄", "┅", "┈", "┉"

有关unicode box绘制字符的更多信息,请访问:http://www.duxburysystems.com/documentation/dbt11.2/miscellaneous/Special_Characters/Unicode_25xx.htm

您也可以使用HTML转义字符包含它们(复制和粘贴通常通过插入框字符的UTF-8序列来工作,浏览器似乎尊重,但如果这不是一个选项),这对于连续四个轻水平框标记:

&#X2500;&#X2500;&#X2500;&#X2500;

呈现为

────


17
投票

select元素可能只包含optgroupoption元素,而option元素可能只包含文本。像<hr>这样的标记是被禁止的。

我会使用这样的元素来创建一个分隔符:

<option disabled role=separator>

您可以考虑这样的标记:

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

但是,不同浏览器之间的渲染变化有点太多而无法接受。


12
投票

你可以使用em破折号“ - ”。每个角色之间没有可见的空格。 在HTML中:

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

或者在XHTML中:

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

6
投票
<option>----------</option>

要么

<option>__________</option>

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

您还可以将css类添加到带有背景图像的空<option>

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

0
投票

如果要将一个分类符分隔符插入到标记中,可以执行以下操作:qazxsw poi

但是,这不是推荐的做法。


0
投票

我使用JSP但你会看到它是一样的。我正在遍历brandMap LinkedHashMap,其中如果key> = 50000,那么它是一个行分隔符,否则是一个普通的select选项。 (我的项目中需要这个)

http://jsfiddle.net/k4emic/4CfEp/


0
投票

这是一篇很老的帖子,但我遇到了很多帖子,其中没有人甚至懒得找到一个优雅的解决方案,虽然它很简单。 每个人都在尝试在<c:forEach items="${brandMap}" var="entry"> <c:if test="${entry.key ge 50000}"> <option value=${entry.key} disabled>&ndash;&ndash;&ndash;&ndash;</option> </c:if> <c:if test="${entry.key lt 50000}"> <option value=${entry.key}>${entry.value}</option> </c:if> 标签之间添加一些东西,但是没有人想到对<option>标签进行STYLING,这是唯一的方法,并且看起来很棒。

要容易成真吗?看

<option>

为了方便起见,我放置了带有html的样式。

这不再起作用了,很明显,不知道为什么人们不断发布答案。规则改变了,这个解决方案有效,我自己一直在使用它。现在我正在使用jQuery插件。

最新编辑:每个人都可以使用惊人的selectpicker插件

<select> <option>First option</option> <option>Second option</option> <option>Third option</option> <option style="border-bottom:1px solid rgba(153,153,153,.3); margin:-10px 0 4px 0" disabled="disabled"></option> <option>Another option</option> <option style="border-bottom:1px solid rgba(153,153,153,.3); margin:-10px 0 4px 0" disabled="disabled"></option> <option>Something else</option> </select>


-4
投票

简单方法:

Dropdown plugin

推荐问答