1

我有一个select有很多选项的标签。每个选项都有 aname和 a 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%：

对齐结果

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

4

2 回答 2

4

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

于 2012-05-16T14:00:12.840 回答
1

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

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

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

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

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

于 2012-05-16T14:13:12.817 回答