リストアイテムをナビゲーションメニューにどのように揃えるには？ <a href="http://inmyhood213.narod.ru/drstrangelove/hotelprague/hotel.html" rel="nofollow">this</a>例で

Question

は、私は次のスタイルを使用します。

ul.menu li { 
    float:left; 
    padding: 17px 35px 0px 35px; 
    font-family: Tahoma, Arial, sans-serif; 
    font-size: 13px; 
    font-weight:bold; 
    height:20px; 
    background: url("sep2.png") no-repeat; 
} 

メニューが揃っていません。これは、（全体のナビゲーションバーに沿って）均等に配置する必要があります。 どうすればいいですか？

Answer 1

メニュー全体が固定幅です。

6つのメニュー項目（li）があります。ディスプレイを追加同じ幅

Answer 2

しようとするそれぞれのLiを設定する6によって

分割して：ブロック。 li要素をレベル要素にブロックします。それが私のやり方です。

Answer 3

パディングを削除し、各liのテキストを中央揃えにして固定幅を追加できます。あなたは<a>タグの大きなクリック領域ではなく、その上幅/テキストアラインメントを入れてdisplay: blockを作りたい場合は

ul.menu li { 
    float:left; 
    padding-top: 0; 
    font-family: Tahoma, Arial, sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    height:20px; 
    text-align: center; 
    width: 142px; 
    background: url("sep2.png") no-repeat; 
} 

：

はこれを試してみてください。

Answer 4

現在のデザインでは、現在のアイテム名がすべて同じで、ナビゲーション内のテキストのみがクリック可能なので、長さの異なるメニューアイテム名は考慮されません。私はこのことをお勧めします：

1. <li>のパディングを取り除く。
2. text-align:centerプロパティを<li>に追加します。
3. <a>には、width:142px（約）を追加します。

これにより、ブロック全体をクリックできるという利点が得られます。