Aligning text inside <option>

问题

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.

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?

This is the code:

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

回答1:

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

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

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

UPDATE

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

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

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

回答2:

What you are asking for is not possible unless you want to change the styles of your design to a monospace font. However, this may change the look of your page. Alternatively, you can experiment with adding spaces ( ) for shorter letters (such as "I").

来源：https://stackoverflow.com/questions/21244332/aligning-text-inside-option