如何在html選擇控件中添加水平線？

Question

如何在HTML下拉控件或選擇控件中添加水平線（<hr>標籤）？

Answer 1

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

或

<option>__________</option> 

，但你不能寫<option><hr /></option>

，你也可以與背景圖像

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

Answer 2

的select CSS類添加到空<option>元素可能只包含optgroup或option元素和option元素可能只包含文本。像<hr>這樣的標記是被禁止的。

我會用一個元素像這樣來創建一個分隔符：

<option disabled role=separator> 

你可以考慮類似這樣的標記：

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

然而，不同瀏覽器之間的渲染變化有點過分可以接受。

Answer 3

一般來說，這不是<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/

Answer 4

如果要插入各種各樣的分隔符成一個標籤，你可以做這樣的事情：http://jsfiddle.net/k4emic/4CfEp/

然而，這是不推薦的做法。

Answer 5

你可以使用em短劃線「 - 」。它在每個角色之間沒有可見的空格。

在HTML：

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

或者在XHTML：

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

Answer 6

我使用JSP，但你會看到相同。 我通過品牌映射LinkedHashMap進行迭代，其中如果鍵> = 50000，那麼它是一個行分隔符，否則是正常的選擇選項。（我需要在我的項目）

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

Answer 7

簡單的方法：

<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">&nbsp;Products&nbsp;</h2> 

Answer 8

我碰到的本次發行前，唯一的跨瀏覽器的方式實現這一目標是使用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;

這使得作爲

＆＃X2500;＆＃X2500;＆＃X2500;＆＃X2500;

Answer 9

這是一篇舊帖子，但我碰到了很多帖子，其中沒有人甚至懶得找到一個優雅的解決方案，雖然它很簡單。
每個人都在嘗試在<option>標籤之間添加東西，但沒有人想過要標記<option>標籤，這是實現它的唯一方法，並且看起來很棒。

要容易成爲現實？外觀

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

爲了方便，我放置了樣式。

Answer 10

什麼是最好的，你可以使用語義UI風格。

<div class="ui dropdown"> 
    <option>Male</option> 
    <option>Female</option> 
    <div class="ui divider"></div> 
    <option>Outhers</option> 
</div> 

上面的代碼工作outhers