HTML内のナビゲーションバーを含むラインテキスト

私はサイトのタイトルのすぐ下にnavbarを持っていますが、タイトルの最初と最後にnavbarの最初と最後の項目を並べる必要があります。ライブプレビューはありませんが、画像を添付しました。私はそれを1つのブラウザで整列させることができますが、別のブラウザで開くと、もう一度オフにします。テキストを上に並べる簡単な方法はありますか？ありがとうHTML内のナビゲーションバーを含むラインテキスト

screenshot

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; 
}

出典

2012-04-08 Eric Goncalves

あなたはtext-align: justify

で動作することができます。これは、古き良きテーブルを求める問題の一種であるdemo

出典

2012-04-08 17:45:05 roger

ねえ、それはうまくいくようです！良いですね。他の答えよりも簡単です。 –

ありがとうございますperectly非常に働いて –

。最初のものを左に、最後を右に並べると、中央のものはすべて中央揃えになります。こうすることで、フォントレンダラーの慈悲に惑わされることはありません。 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-08 17:27:26

どのようにあなたが答えで編集を参照してください –

を求めて私を気にいけない場合、私はそれについて行くだろう。 –

私は試してみましたが、左右のいずれかを揃えていません –

を参照してください。

<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-08 17:51:26 Starx

しかし、テーブルは悪です！ [またはそれらは？]（@stackoverflow.com/questions/890850/table-for-layouts-is-evil-right） –

@TonyR、いいえ、テーブルは決して悪ではなかった。人々は彼らだったが – Starx

今日でも人々はまだ怒っている。あなたがテーブルソリューションを投げたのは良いことです。私は無関心ですが、誰もが怒っているので、私は決してレイアウト用のテーブルを使用しません。少なくとも私の経験では、ほとんど常にまともなCSSソリューションがあります。とにかくもう1つの答えは受け入れられましたが、これは+1です） –

HTML内のナビゲーションバーを含むラインテキスト

答えて

関連する問題