如何在html选项标签内实现两个不同的对齐方式？

Question

我有一个带国家/地区呼叫代码的精选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

我已经介绍了使用CSS实现这一目标的span元素.

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

上面的代码,不起作用.而且,span元素似乎在XHTML 1.0 strict的html选项标记内无效.

任何的想法？

Answer 1

我曾经遇到过这个问题,我所做的是用等宽字体格式化文本,并在中间填充空格以分隔文本,并使每行成为偶数个字符.