對齊內部文本<option>

我有一個<option>列表，其中的項目按字母順序列出。問題在於，在字母字符之後出現的標題不是相互垂直的。在選擇這個選項時尤其可以看到：I.亨廷頓劇院，它離左邊太遠。對齊內部文本<option>

理想情況下，我希望按字母順序排列的字符（a，b，c）右對齊，並使標題對齊左側。

任何關於將每個標題的第一個字符垂直對齊的建議？

enter image description here

這是代碼：

<select id="selectLocation" style="color:#09F; font-size:18px;" name="categories"> 
     <option style="color:#999999;">Choose an Attraction</option> 
     <option></option> 
     <option value='boscenChoice'>A. Boston Medical Center</option> 
     <option value='boslibChoice'>B. Boston Public Library</option> 
     <option value='chrcenChoice'>C. Christian Science Center</option> 
     <option value='chuapaChoice'>D. Church Park Apartments</option> 
     <option value='copplaChoice'>E. Copley Place Shopping</option> 
     <option value='fenparChoice'>F. Fenway Park</option> 
     <option value='findisChoice'>G. Financial District</option> 
     <option value='houbluChoice'>H. House of Blues</option> 
     <option value='huntheChoice'>I. Huntington Theatre</option> 
     <option value='isamusChoice'>J. Isabella Stewart Gardener Museum</option> 
     <option value='logairChoice'>K. Logan International Airport</option> 
     <option value='lonmedChoice'>L. Longwood Medical and Academic Area</option> 
     <option value='mashosChoice'>M. Massachusetts General Hospital</option> 
     <option value='mastecChoice'>N. Massachusetts Institue of Technology</option> 
     <option value='musartChoice'>O. Museum of Fine Arts</option> 
     <option value='newstrChoice'>P. Newbury Street Shopping</option> 
     <option value='prucenChoice'>Q. Prudential Center Shopping</option> 
     <option value='pubgarChoice'>R. Public Garden</option> 
     <option value='symhalChoice'>S. Symphony Hall</option> 
    </select>

來源

2014-01-20 Wolf Cat

可以使用monospace fonts之一，例如速遞：

style="color:#09F; font-size:18px; font-family:Courier"

演示：http://jsfiddle.net/fmsFF/

UPDATE

作爲JS替代品，您可以使用jQuery SELECT2插件。它讓你以多種不同的方式格式化你的下拉列表，並增加了很多選項。

例如，你可以這樣定義它：

$('#selectLocation').select2(
    { 
     width:'400px', 
     formatResult: format, 
     formatSelection: format, 
    });

這種方法可以讓你通過自定義格式功能，你可以這樣定義：

function format(option) { 
    if (option.id.indexOf('Choice') != -1) { 
     return "<span style='display:inline-block;width:20px'>" + option.text.substring(0,2) + "</span>" + option.text.substring(2) 
    } else { 
     return option.text 
    } 
}

這裏做的事情 - 是分開字母字符放入其固定寬度的SPAN中 - 爲您提供所需的外觀。

演示2：http://jsfiddle.net/fmsFF/1/

來源

2014-01-20 21:21:05

是的，這是用

+1等寬字體不一定非常難看。一些鏈接中的字體我不會從第一眼看到Arial。 –

@Diodeus我想用「世紀哥特」作爲字體，因爲這是網站的其他部分所具有的。你會建議什麼樣的基於JS的替代方案？ –

你所要求的，除非你想在風格設計的改變等寬字體是不可能的。但是，這可能會改變你的頁面的外觀。或者，您可以嘗試爲較短的字母（例如「I」）添加空格（ ）。

來源

2014-01-20 21:23:28 bboysupaman

對齊內部文本<option>

回答

相關問題