css - 画面拡大時のスクロールバー

Question

いくつかの div があり、画面を大きくすると (CTRL +) スクロールバーがページの下部に表示され、div がインライン ブロックのままになるようにしたいのですが、ここにコードがあります ( http://fiddle.jshell.net/ JNzFp/ ) 画面が表示されるとわかるように、div の下に大きなスクロールバーが表示され、全画面の下部に表示したいと考えています。

Answer 1

white-space: nowrap;レスポンシブデザインのように、ズームインするとメニューが自然にラップされるように、削除するのが最善の方法だと思います。

Answer 2

メニューを作成するには、次のコードを試してください。

HTML

<div id="main">
<div class="main-navigation">
    <div id="clubbmenu" class="menu-top-meniu-container">
        <ul id="menu-top-meniu" class="menu">
            <li><a href="#">Description</a></li>
            <li><a href="#">Shippings and Payments</a></li>
            <li><a href="#">Seller Information</a></li>
            <li><a href="#">Feedback</a></li>
        </ul>
    </div>  
</div><!-- end .main-navigation -->         

CSS

#main {
    padding-top: 10px;
    height: 48px;
    clear: both;
    width: 981px;
    margin: 0px auto 8px auto;
}

.main-navigation {
    width: 975px;
    position: relative;
    margin: 0 auto;
    zoom: 1;
}

#clubbmenu {
    zoom: 1;
}

#clubbmenu > ul {
    margin: 0px;
    padding: 0;
    position: relative;
}

#clubbmenu > ul > li {
    float: left;
    position: relative;
    list-style: none;
    margin-left: 7px;
    padding: 0;
}

#clubbmenu > ul > li > a {
   text-transform: uppercase;
   text-decoration: none;
   display: block;
   padding: 8px 30px 8px 30px;
   font-size: 17px;
}

必要に応じてマージン、パディングを設定します。