1

幅 100% のナビゲーション バーを、幅 100% のヘッダー内に均等に配置しようとしています。また、各a要素にはそれぞれ 2 つの単語があり、互いに完全に中央に配置されています。

私が使用している HTML は以下のとおりです。

<div class="nav">
  <ul>
  <li><a href="#"><span style="font-family:sacramento; text-align: center;">Our</span><br> HOME</a></li>
  <li><a href="#"><span style="font-family:sacramento;text-align: center;">About</span><br> US</a></li>
 <li><a href="#"><span style="font-family:sacramento;text-align: center;">Client</span><br> WORKS</a></li>
 <li><a href="#"><span style="font-family:sacramento;text-align: center;">Contact</span><br> US</a></li>
 <li><a href="#"><span style="font-family:sacramento;text-align: center;">Our</span><br> VISION</a></li>
 <li><a href="#"><span style="font-family:sacramento;text-align: center;">Our</span><br> BIOS</a></li>
 </ul>
 </div><!--end of nav-->

私が使用しているCSS

.nav {
position: relative;
width: 100%;
text-align: center;
 }
 .nav ul {
margin: 0;
padding: 0;
 }
 .nav li {
margin: 25px 80px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
text-align: center;
 }
 .nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 20px;
width: 10px;

   }

私が作ろうとしている例は、以下のようになります。

アップデート

IE9 でコードを試すと、次の画像が表示されます。

どうすればこれを解決できますか。

4

2 に答える 2

0

この JSfiddle を確認してください: JSfiddle working

結果はこちらナビゲーションの結果

このCSSを使用

  .nav {
   position: relative;
   width: 100%;
    text-align: center;
      }
  .nav ul {
  margin: 0;
   padding: 0;
       }
     .nav li {
     margin: 0 5px 10px 0;
  padding: 5px 20px;
  list-style: none;
    display: inline-block;
    text-align: center;
      }
      .nav a {
       padding: 3px 2px;
       text-decoration: none;
       color: #999;
       line-height: 100%;
     font-family: actor;
       font-size: 15px;
       width: 10px;



        }
于 2013-02-17T11:48:53.650 に答える
0

すべてのアイテムを均等に分配するには、リスト アイテムにパーセンテージ幅を設定します。アイテムが 6 つあるので、ルールに追加width: 16%;します。.nav li

テキストの変更を中央揃えにするには:

 .nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
width: 10px;

   }

to (明示的な幅を削除し、display: ブロックを追加):

 .nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
display: block;
   }

最後にdisplay: inline-block、.nav liルールから削除して追加しfloat: leftます。<div style="clear: both"></div>また、ページ フローを「修正」するために、リスト (タグ) の下に要素を追加する必要があります。

于 2013-02-17T11:52:09.977 に答える