在< option>中对齐文本 [英] Aligning text inside <option>

问题描述

我有一个< option> 列表，其中包含按字母顺序列出的项目.问题在于，字母字符后的标题在垂直方向上并不对齐.可以从以下选项中特别看出这一点:I.亨廷顿剧院，离左边太远了.

I have an <option> list with items listed alphabetically. The problem is that the titles which come after the alphabetical characters are not vertically in line with each other. This can especially be seen in option this option: I. Huntington Theatre, which is too far to the left.

理想情况下，我希望字母(a，b，c)靠右对齐，标题要靠左对齐.

Ideally I would like the alphabetical characters (a, b, c) to align right and the titles to align left.

关于垂直对齐每个标题的第一个字符的任何建议吗?

Any suggestions for aligning the first character of each title vertically?

这是代码:

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

推荐答案

您可以使用等宽字体之一，例如Courier:

You can use one of the monospace fonts, for example Courier:

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

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

更新

UPDATE

作为JS替代品，您可以使用jQuery SELECT2 插件.它使您可以采用多种不同的格式设置下拉菜单的格式，并添加许多选项.

As a JS alternative you can use a jQuery SELECT2 plugin. It let's you format your dropdown in many different ways and adds a lot of options.

例如，您可以这样定义它:

For example you can define it like this:

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

此方法可让您传递自定义格式设置功能，您可以像这样定义:

This approach lets you pass custom formatting function, which you can define like this:

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-为您提供所需的外观.

What this does - is separates the alphabetical character into its own SPAN of fixed width - giving you the desired look.

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

Demo 2: http://jsfiddle.net/fmsFF/1/

这篇关于在< option>中对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！