0

サイトのタイトルのすぐ下にナビゲーションバーがありますが、ナビゲーションバーの最初と最後のアイテムをタイトルの最初と最後に並べたいと思います。ライブプレビューはありませんが、画像を添付しました。一方のブラウザで並べることはできますが、もう一方のブラウザで開くと、再びオフになります。すべてのテキストが機能するようにテキストを並べる簡単な方法はありますか？ありがとうございました

スクリーンショット

HTML：

<body onload="play()">
    <div class="heading">UPRISING</div>
    <div class="container_12"> 
       <div id="topnav" align="center">
         <ul id="list-nav">
           <li><a href="home.html">HOME</a></li>
           <li><a href="about.html">ABOUT</a></li>
           <li><a href="trailer.html">TRAILER</a></li>
           <li><a href="stills.html">STILLS</a></li>
           <li><a href="news.html">NEWS</a></li>
           <li><a href="contact.html">CONTACT</a></li>
           <!-- <li><a href="distribution.html">DISTRIBUTION</a></li> -->
         </ul>
       </div>

<!-- START OF CONTAINER -->

  <div class="trailer">
    <img id="imgHolder" />    
  </div>
 </div> <!-- END OF CONTAINER 12 -->

CSS：

#topnav li {
  margin-right: 110px;
}

#topnav li:nth-last-child(1) {
  margin-right: 0px;
}
4

3 に答える 3

2

あなたはで働くことができますtext-align: justify

デモを見る

于 2012-04-08T17:45:05.353 に答える
1

これは、古き良きテーブルを必要とする一種の問題です。

<table id="list-nav">
     <tr>
           <td><a href="home.html">HOME</a></td>
           <td><a href="about.html">ABOUT</a></td>
           <td><a href="trailer.html">TRAILER</a></td>
           <td><a href="stills.html">STILLS</a></td>
           <td><a href="news.html">NEWS</a></td>
           <td><a href="contact.html">CONTACT</a></td>          
     </tr>
</table>

幅は均等に分散され、問題が解決されます。

または...

#list-nav li:last-child { text-align: right; }
于 2012-04-08T17:51:26.293 に答える
0

リストアイテムの幅を固定します。最初のものを左に、最後のものを右に揃えます。中央にあるものはすべて中央揃えにする必要があります。このようにして、フォントレンダラーに翻弄されることはありません。

CSSで更新：

#topnav li {
    text-align: center;
    width: Xpx; /* X is total width divided by number of list items */
}
#topnav li:first-child {
    text-align: left;
}
#topnav li:last-child {
    text-align: right;
}
于 2012-04-08T17:27:26.587 に答える