如何在html选项标签中实现两个不同的对齐？ [英] How to achieve two different alignments inside a html option tag?

问题描述

我有一个带有国家/地区调用代码的选择html标记。

I have a select html tag with country calling codes.

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

我希望名称左对齐，代码要对齐。简报应如下所示：

I want the name to be left aligned and the code to be right aligned. Presentation should look like:

Afghanistan                +93   
Albania                   +355   
Algeria                   +213

我引入了span元素来实现CSS。

I have introduced the span elements to achieve this with CSS.

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

上面的代码，不工作。此外，span元素似乎在XHTML 1.0 strict的html选项标记内无效。

Above code, is not working. Moreover, span elements seem to be not valid inside a html option tag for XHTML 1.0 strict.

任何想法？

推荐答案

我做的是将文本格式化为等宽字体，并用空格填充中间，以分隔文本，并使每行的偶数个字符。

I faced this issue once and what I did was format the text in a monospaced font and fill the middle with spaces to seperate the text and make each row an even number of characters.

这篇关于如何在html选项标签中实现两个不同的对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！