0

サイトデザインのベースとしてファンデーションを使用し、画面横のナビゲーションバーを開発しています。Foundation のサイド ナビゲーションを使用したいのは、それには仕切りがあり、ナビゲーション リンクをグレー表示または「アクティブ」としてマークするための優れた方法があるためです。私が抱えている問題は、リンクのクリック可能な領域が、リンクのテキスト コンテンツではなく、コンテナーの幅を拡張することです。それは紛らわしいと感じており、ユーザーにそのような経験をさせたくありません。

ザーブ財団コード:

<section class="section">
     <ul class="side-nav no_padding_top">
        <h5 >What can I do here?</h5>

        <li class="">
            <a href="#" >View Popular</a>           
        </li>
        <li class="">
            <a href="#" >View Top Rated</a>         
        </li>
        <li class="">
            <a href="#" >Browse Categories</a>          
        </li>
     </ul>
</section>

下の図では、クリック可能な領域の周囲に境界線を付けて、zurb サイト ナビゲーションがレンダリングされる方法 (下) を示しています。リンクテキスト（上部）の周りのクリック領域を制限したい。クリック可能なリンクは、コンテナーではなく、テキストのサイズです。これを行うには、デフォルトの zurb 基盤の動作をオーバーライドするにはどうすればよいですか?

リンクがどのようにレンダリングされるかの周りに境界線を置きました。 トップスタイルのようにレンダリングしたいのですが、zurbサイトのnavがリンクのクリックエリアを広げてしまいます。

4

1 に答える 1

1

にリンクが設定されているためdisplay:blockです。次のようにオーバーライドします。

.side-nav li a {
  display: inline-block;
}
于 2013-08-22T05:27:56.230 に答える