在 <option> 标签内对齐文本

Question

我有一个select 标签，里面有很多选项。每个选项都有一个name 和一个date，它们都应该打印在每个<option> 中。

我想像这样对齐列表：

Name    Date
Name    Date
Name    Date

由于每个名字都有不同的长度，我写了这段代码：

//Start of the option text//

//Always print 20 characters, even if the name is longer//
print  ">".substr($eventsArr[$j]->GetName(),0 ,20); 

//If the name is shorter then 20 chars//                        
if(strlen($eventsArr[$j]->GetName()) < 20) 
{
    //Add missing chars (20 - the length of the string) with spaces//
    for($t = 0; $t < 20 - (strlen($eventsArr[$j]->GetName())); $t++)
    {
       print "&nbsp";
    }
}
print "" .$newDate."</option>\n"; //Then print the date//

我正在完成正确数量的空格。但是如你所见，对齐并不是 100%：

我猜是因为每个字母都有不同的像素宽度。所以......有没有办法做这种对齐？谢谢。

Answer 1

只需为此使用等宽字体。这就是它们的设计目的。

Answer 2

选项元素不应该以这种方式格式化。使用等宽字体将是实现对齐的方法，但这会使文本看起来很难看，而且等宽字体的可读性也较差。此外，并非所有浏览器都支持option 元素的字体系列设置；例如，IE 9 没有。

解决方法或替代方法是使用一组单选按钮而不是 select 元素。然后就可以使用表格了：

 <table>
 <tr><td><input type=radio id=a1> <label for=a1>Name</label>
     <td>Date
 ...
 </table>

这会处理对齐，并且还允许您以跨浏览器的方式指定用于标签的字体。

如果有大量备选方案，您可以考虑为表格设置高度和垂直滚动。但让用户根据需要向下滚动页面可能会更好，而不是两级滚动。