0

固定幅、中央揃え、2 列のレイアウト (サイドバーとコンテンツ) を使用しており、サイドバーに Web サイトのメイン ナビゲーションがあります。ユーザーがナビゲーションの特定のリンクにカーソルを合わせるか、現在その特定のページを表示している場合、ナビゲーション リンクの背景色がブラウザの端まで続くホバー/ハイライト ステージが必要です。

たとえば、私のレイアウトのサイドバーは幅 200px で左側にあります。私のコンテンツ列は幅 700px で、サイドバーの右側にあります。幅 900px に設定され、「margin: 0 auto」によって中央に配置されたサイドバーとコンテンツ div の両方を親とする「ラッパー」 div があります。ユーザーがナビゲーション内のリンクにカーソルを合わせた場合、リンクの背景色がリンクの背後にあるだけでなく、ユーザーが画面の幅に関係なくブラウザ ウィンドウの左端まで続くようにしたいと考えています。に設定されたブラウザ ウィンドウ。

レイアウト例はこちら: http://i.imgur.com/QfY8b.gif

4

1 に答える 1

2

したがって、CSS のみを使用して、やりたいことを行うことができます。基本的に各li項目は横幅を大きく設定してください。次に、text-align を使用して、テキストを右揃えに設定します。パディング (右) を設定して、テキストが横にキスしないようにします。最後に :hover セレクターを使用して、(新しい CSS コードを設定することにより) 各ライトを個別に点灯させます。

#nav はulリストの ID であることに注意してください。ナビゲーション メニューを次のようにしてください。

HTML

<ul id='nav'>
    <li>Nav Link</li>
    <li>Navy Link</li>
    <li>Nav Links</li>
</ul>

CSS

#nav{
    float:left;
}
#nav li{
    width:200px;
    height:2em;
    line-height:2em;
    padding:0px 40px 0px 0px;
    margin:5px 0px 5px 0px;
    text-align:right;
}
#nav li:hover{
    background-color:#000;
    color:#fff;
}

編集リンクのスタイリングを追加するのを忘れていました。基本的にliのスタイル/サイズを継承します。

#nav a{
    width:inherit;
    height:inherit;
    margin:0px;
    padding:0px;
}
于 2012-09-20T21:19:01.337 に答える