0

ナビゲーション バーの解像度を変更すると、グリッチが発生します。これが私の HTML です。

<!--Start header-->
    <div id="header">

        <div id="nav_header">
          <ul id="list-nav">
            <a href="index.htm" id="home">Troll Happy</a>
<li><a href="iphone.htm" id="fail">iPhone Fail</a></li>
  <li><a href="forever.htm" id="alone">Forever Alone</a></li>
  <li><a href="rage.htm" id="rage">Rage Comics</a></li>
  <li><a href="derphina.htm" id="Derp">Derpina</a></li>
  <li><a href="okay.htm" id="okay">Okay face</a></li>
  <li><a href="http://forums.trollhappy.co.uk/xenforo/forum/index.php" id="forums">Forums</a></li>
        </ul>
        </div>
    </div>
<!--End header-->

そして私のCSS;

    #header {
        height:66px;
        background-color:#000;
            position: absolute;
            width: 100%;
        left:0;
    }




#nav_header {
    height:50px;
    margin-left:100px;
}

ul#list-nav {
  list-style:none;
  margin:20px;
  padding:0;
}

ul#list-nav li {
  display:inline;
  font-family: Century Gothic, sans-serif;
  font-size:13px;
  font-weight:bold;
}

ul#list-nav li a {
  text-decoration:none;
  padding:15px 0;
  width:110px;
  color:#eee;
  float:left;
  text-align:center;
  border-right:1px solid #353535;
}

ここで何が起こっているかを見ることができます。

trollhappy.co.jp

ご覧のとおり、解像度を変更すると、ナビゲーション バーが非常に不安定になります。

男の子も女の子もありがとう

4

2 に答える 2

0

要素が左に浮かん<li><a>でいます。つまり、コンテナーが水平方向に小さすぎるためにすべてが 1 行に収まらない場合、要素がコンテナーからはみ出してしまいます。

簡単にするために、リンクを非表示にするだけで、小さな画面用に適切な劣化を実装するのではなく、幅 960 ピクセルのブラウザー ウィンドウで適切に表示されることを確認してください。overflow: hidden;にスタイルを適用するだけ#nav_headerです。

于 2012-09-06T19:29:46.317 に答える