0

[聞く]

ページをズームインするとメニュー リストが消えるのはどうしてですか?

例：

<-- Normal Page [No Zoom] -->

[Logo] Profile Gallery Guestbook


<-- Zoom In 120% -->

[Logo] Profile Guestbook


<-- Zoom In 150% -->

[Logo] Guestbook


<-- Zoom In 200% -->

[Logo]

これは私のcssとdivコードです:

#nav {list-style-type:none; margin:0px; position:static;}


#nav li a {display:inline-block; width:50; padding: 10 20 10 20; text-align:center;     text-decoration:none; float:left; color:#FFF;}


#nav li a:hover {background:#FFF; color:#000; border-top:3px solid #333;}

<ul id="nav">

<li ><a href="/">Profile</a></li>

<li ><a href="/">Gallery</a></li>

<li ><a href="/">Guestbook</a></li>

</ul>

ページを拡大すると、メニューはスクロールバーなしで自動的に消えます。

例については、http://www.mashable.comナビゲーション マニュアルをご覧ください。

4

2 に答える 2

0

よく使用しoverflow:hidden;、適切に構造化し、適切にスタイルする必要があります。

HTML:

<div class='nav'>
   <ul>
     <li><a href='#'>One</a></li>
     <li><a href='#'>Two</a></li>
     <li><a href='#'>Three</a></li>
     <li><a href='#'>Four</a></li>
     <li><a href='#'>Five</a></li>
     <li><a href='#'>Six</a></li>
   </ul>
</div>

CSS:

.nav{width:80%; height:50px; background:#e5e5e5; overflow:hidden;} // wrapper for navigation with overflow hidden
.nav ul{margin:0; padding:0; width:100%; overflow:hidden;} // list parent with overflow hidden too
.nav li{display:inline-block; padding:0 20px; height:50px; line-height:50px;}

これを行う方法は他にもありますが、私はこの方法で短く簡単に行うのが好きです。

これを実際に見る

于 2013-05-29T10:16:01.823 に答える