-1

ここにjsfiddleがあります http://jsfiddle.net/8PcxE/

<div id="container">
        <div id="header">
                <div id="nav-container">
                    <ul id ="nav-list">
                        <li id=nav-title>lymbo</li>
                        <li><a href="#">Playmaps</a></li>
                        <li><a href="../map.html">Map</a></li>
                        <li><a href="../about.html">About</a></li>
                        <li><a href="#">My Account</a></li>
                        <li><a href="#">Log Out</a></li>
                    </ul>
                </div>
        </div>

幅の広いページでは問題ありませんが、小さなページで実行するとすべてが窮屈になり、オプションが押し込まれてジッパーのようなパターンができてしまいます。

私のもう 1 つの問題は、ヘッダーまたは段落に何かを入力すると、上部に表示され、ナビゲーション バーと交差して混乱しているように見えることです。

私の目標は、一種の「グラデーション」に見えるナビゲーション バーを作成することです。しかし、それも正しくないようです。誰かがそれについて私に意見を与えることができれば、それは大歓迎です。

nav-container CSS を position: relative from position: fixed に変更した後、うまくいくことがわかりました。これを行うことによる悪影響はありますか？

4

1 に答える 1

0

すべてを に変更した<li>ためinline、最も簡単な解決策は、 でのラップを防ぐこと<ul>です。

#nav-list {
  white-space: nowrap;
  /* ... */
}

http://jsfiddle.net/mblase75/Lt72p/

于 2013-05-29T18:26:40.467 に答える