对齐<option> </option>中的文本

时间：2014-01-20 21:17:37

标签： html css select

我有一个<option>列表，其中的项目按字母顺序列出。问题是字母字符后面的标题不是垂直排列的。特别是在选项中可以看到这一点：I。亨廷顿剧院，它离左边太远了。

理想情况下，我希望字母字符（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>

2 个答案:

答案 0 :(得分：5)

您可以使用其中一个monospace fonts，例如Courier：

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

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

的更新 的

作为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/

答案 1 :(得分：2)

除非您想将设计的样式更改为等宽字体，否则无法提出要求。但是，这可能会改变页面的外观。或者，您可以尝试为较短的字母（例如“I”）添加空格（&nbsp;）。

相关问题
最新问题