如何在 html 选择控件中添加水平线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4317025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add a horizontal line in a html select control?
提问by willam
How do I add a horizontal line (<hr>tag) in the dropdown control or in select control in HTML?
如何<hr>在 HTML 中的下拉控件或选择控件中添加水平线（标记）？
回答by Orbling
Generally speaking this is not a feature of <select>, most browsers have very poor styling control for that control. In Firefox you can do the following (though doesn't work in other browsers):
一般来说，这不是 的功能<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>
with CSS:
使用 CSS：
option.select-hr { border-bottom: 1px dotted #000; }
But generally speaking, the only method is to put an option in with dashes, and try to make it unselectable.
但一般来说，唯一的方法是在选项中加上破折号，并尽量使其不可选择。
<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>
回答by Edem
I've run into this issue before and the only cross-browser way to achieve this is to use unicode box drawing horizontal characters. Browsers don't render spaces between these characters. Of course that also means that your page must accept unicode (utf-8) which is almost a given these days.
我以前遇到过这个问题，实现这一点的唯一跨浏览器方法是使用 unicode 框绘制水平字符。浏览器不会在这些字符之间呈现空格。当然，这也意味着您的页面必须接受 unicode (utf-8)，这在当今几乎是既定的。
Here is a demo, this one using a "light horizontal" box mark:
这是一个演示，该演示使用“浅水平”框标记：
<option value="" disabled="disabled">─────────────────────────</option>
There are various unicode box character options you can use as separator which should be rendered without spaces between them:
有多种 unicode 框字符选项可以用作分隔符，它们之间应该没有空格：
"─", "━", "┄", "┅", "┈", "┉"
"─", "━", "┄", "┅", "┈", "┉"
More about unicode box drawing characters here: http://www.duxburysystems.com/documentation/dbt11.2/miscellaneous/Special_Characters/Unicode_25xx.htm
更多关于 unicode 框绘图字符的信息：http: //www.duxburysystems.com/documentation/dbt11.2/miscellaneous/Special_Characters/Unicode_25xx.htm
You can also include them using HTML escape chars (copy and paste usually works by inserting the box characters' UTF-8 sequence, which browsers seem to respect, but if that's not an option), this for four light horizontal box marks in a row:
您还可以使用 HTML 转义字符包含它们（复制和粘贴通常通过插入框字符的 UTF-8 序列来工作，浏览器似乎尊重它，但如果这不是一个选项），这是连续四个浅色水平框标记：
────
────
which renders as
呈现为
────
────
回答by Josh Lee
The selectelement may only contain optgroupor optionelements, and optionelements may only contain text. Markup like <hr>is forbidden.
该select元件可仅包含optgroup或option元件，并且option元件可以仅包含文本。<hr>禁止标记之类的。
I would use an element like this to create a separator:
我会使用这样的元素来创建一个分隔符：
<option disabled role=separator>
You may consider markup like this:
你可以考虑这样的标记：
<optgroup label="-------"></optgroup>
However, the rendering between different browsers varies a little too much to be acceptable.
但是，不同浏览器之间的渲染差异太大，无法接受。
回答by Tobi
You could use the em dash "—". It has no visible spaces between each character.
In HTML:
您可以使用破折号“—”。每个字符之间没有可见的空格。
在 HTML 中：
<option value disabled>—————————————</option>
Or in XHTML:
或者在 XHTML 中：
<option value="" disabled="disabled">—————————————</option>
回答by hunter
<option>----------</option>
or
或者
<option>__________</option>
but you can't write <option><hr /></option>
但你不能写 <option><hr /></option>
you could also add a css class to an empty <option>with a background image
您还可以将 css 类添加到<option>带有背景图像的空文件中
<option class="divider"> </option>
回答by K4emic
If you want to insert a seperator of sorts into a tag, you can do something like this: http://jsfiddle.net/k4emic/4CfEp/
如果你想在标签中插入一个分隔符，你可以这样做：http: //jsfiddle.net/k4emic/4CfEp/
However, this isn't recommended practice.
但是，这不是推荐的做法。
回答by Mircea Stanciu
I used JSP but you will see that is same. I am iterating through a brandMap LinkedHashMap where if key >= 50000, then it is a line separator, else is a normal select option. (I need that in my project)
我使用了 JSP，但你会看到它是一样的。我正在遍历一个brandMap LinkedHashMap，如果key >= 50000，那么它是一个行分隔符，否则是一个普通的选择选项。（我需要在我的项目中）
<c:forEach items="${brandMap}" var="entry">
<c:if test="${entry.key ge 50000}">
<option value=${entry.key} disabled>––––</option>
</c:if>
<c:if test="${entry.key lt 50000}">
<option value=${entry.key}>${entry.value}</option>
</c:if>
回答by Lucian Minea
This is an old post, but I ran into a lot of posts in which no one even bother to find a elegant solution, although it is simple.
Everyone is trying do ADD something into between <option>tags, but no one thought about STYLING the <option>tag, which is the only way to do it and to look amazing.
这是一篇旧帖子，但我遇到了很多帖子，尽管它很简单，但没有人甚至懒得找到优雅的解决方案。
每个人都在尝试在<option>标签之间添加一些东西，但没有人考虑过对<option>标签进行造型，这是做到这一点并看起来很棒的唯一方法。
To easy to be true ? Look
容易为真？看
<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>
I've placed the style with the html for ease.
为方便起见，我已将样式与 html 一起放置。
This doesn't work anymore, it's clear, don't know why people keep posting answers. The rules changed, this solution worked, I've been using it myself. Nowadays I'm using jQuery plugins for this.
这不再起作用，很明显，不知道为什么人们不断发布答案。规则改变了，这个解决方案奏效了，我自己一直在使用它。现在我为此使用 jQuery 插件。
Lates edit: Everyone can use the amazing selectpickerplugin
Lates 编辑：每个人都可以使用令人惊叹的selectpicker插件
回答by Sindhu
Simple Way :
简单的方法：
<h2 style="
font-family:Agency FB;
color: #006666;
table-layout:fixed;
border-right:1px solid #006666;
border-right-width:400px;
border-left:1px solid #006666;
border-left-width:400px;
line-height:2px;"
align="center"> Products </h2>
