Как добиться двух разных выравниваний внутри тега опции html?

У меня есть тег select html с телефонными кодами страны.

<select name="countryCallingCode" id="countryCallingCode">
    <option value="1"><span class="name">Afghanistan</span><span class="code">+93</span></option>
    <option value="2"><span class="name">Albania</span><span class="code">+355</span></option>
    <option value="3"><span class="name">Algeria</span><span class="code">+213</span></option>
</select>

Я хочу, чтобы имя было выровнено по левому краю, а код был выровнен по правому краю. Презентация должна выглядеть так:

Afghanistan                +93   
Albania                   +355   
Algeria                   +213

Я ввел элементы span, чтобы добиться этого с помощью CSS.

select#countryCallingCode span.name {text-align: left;}
select#countryCallingCode span.code {text-align: right;}

Код выше не работает. Кроме того, элементы span кажутся недействительными внутри тега опции html для XHTML 1.0 strict.

Любая идея?


css xhtml xhtml-1.0-strict
person Sergio del Amo    schedule 27.01.2009    source источник

Ответы (5)


arrow_upward
7
arrow_downward

Однажды я столкнулся с этой проблемой, и я отформатировал текст моноширинным шрифтом и заполнил середину пробелами, чтобы разделить текст и сделать каждую строку четным числом символов.

person tonyriddle    schedule 27.01.2009
comment
Я тоже так делаю. Большинство серверных языков предоставляют функцию типа printf(), которую можно использовать для генерации правильного количества пробелов для каждой опции. - person TJ L; 27.01.2009
comment
Хотелось бы что-то получше, но это все, что я смог найти. - person tonyriddle; 27.01.2009

arrow_upward
0
arrow_downward

Попробуйте что-нибудь вроде этого

select {width:100px;}
.name  {float:left;}
.code  {float:right;}
person Birk    schedule 27.01.2009

arrow_upward
0
arrow_downward

измените поле выбора с помощью javascript:

найдите самое длинное название страны, затем измените все параметры, чтобы между названием страны и телефонным кодом было достаточно пробелов.

person Spikolynn    schedule 27.01.2009

arrow_upward
0
arrow_downward

Моно-интервал - правильный ответ, но .... вы можете получить довольно близкое (не идеальное) использование некоторого jQuery для многократного измерения текстовой строки в скрытом диапазоне.

var list = [ ["Afghanistan","+93"], ["Albania","+355"], ["Algeria","+213"] ] ;
var max = 0;
for (n = 0; n < list.length; n++)
{
    var s = list[n][0] + "..." + list[n][1]; 
    $('#dummy').html(s);
    var x = $('#dummy')[0].offsetWidth;
    list[n].push(x);
    if (max < x) max = x;
}

for (n = 0; n < list.length; n++)
{
    var fill = max - list[n][2];
    var s = "...";
    while (true)
    {
        $('#dummy').html(s);
        var x = $('#dummy')[0].offsetWidth;
        if (fill <= x) break;
        s += ".";
    }
    var html = list[n][0] + s + list[n][1];
    $('#countryCallingCode').append($('<option></option').val(n+1).html(html));     
}
person Scott Evernden    schedule 27.01.2009

arrow_upward
0
arrow_downward

Вот монопространственное JS-решение, которое можно использовать вместе с примером Скотта Эверндена JQuery. Я тестировал его только в Firefox, но этого должно быть достаточно для начала.

JavaScript

var MIN_SPACES_BETWEEN_VALS = 3;

function mkOption(left, right, total)
{
    var str = left;
    var spaces = total - left.length - right.length;
    for(x = 0;x < spaces;x++)
        str += "\xA0";

    var opt = document.createElement("option");
    opt.text = str + right;
    opt.value = right;
    return opt;
}

function populate(selId, vals)
{
    var sel = document.getElementById(selId);

    var maxLeft = -1;
    var maxRight = -1;
    for(idx = 0;idx < vals.length;idx++)
    {
        if(vals[idx][0].length > maxLeft)
            maxLeft = vals[idx][0].length;

        if(vals[idx][1].length > maxRight)
            maxRight = vals[idx][1].length;
    }

    var total = maxLeft + maxRight + MIN_SPACES_BETWEEN_VALS;
    for(idx = 0;idx < vals.length;idx++)
        sel.add(mkOption(vals[idx][0], vals[idx][1], total), null);   
}

HTML

<html>

    <head>
        <script src="selectTest.js">

        </script>
        <style>
            select
            {   
               font-family: Courier, mono;
            }
        </style>
    </head>

    <body>

        <select name="countryCallingCode" id="countryCallingCode">
        </select>
        <script>
            var vals = [["Afghanistan", "+93"], ["Albania", "+355"], ["Algeria", "+213"]];
            populate("countryCallingCode", vals);
        </script>

    </body>

</html>
person Matt McMinn    schedule 27.01.2009