在<option>标签</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

只需使用Monospaced字体即可。这就是他们的设计目标。

Answer 2

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

变通方法或替代方法是使用一组单选按钮而不是select元素。然后你可以使用表格：

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

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

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