1

多くのオプションを持つselectタグがあります。すべてのオプションには anameと adateがあり、両方とも every に出力する必要があります<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>

これにより配置が処理され、ブラウザ間で機能する方法でラベルに使用されるフォントを指定することもできます。

選択肢が多数ある場合は、テーブルの高さと垂直スクロールを設定することを検討してください。ただし、2 レベルのスクロールではなく、ユーザーが必要に応じてページを下にスクロールできるようにした方がよい場合があります。

于 2012-05-16T14:13:12.817 に答える