css - 滚动条让屏幕变大

Question

我有一些 div，我希望当我得到更大的屏幕（CTRL +）时，滚动条出现在页面底部并且 div STAYS 内联块，我在这里有代码（http://fiddle.jshell.net/ JNzFp/），正如您在获得屏幕时看到的那样，在 div 下方出现更大的滚动条，我希望它显示在全屏的底部。

Answer 1

尝试以下代码来创建菜单：

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;
}

根据您的需要设置边距，填充。

Answer 2

我认为您最好的选择就是删除white-space: nowrap;，以便您的菜单在放大时自然包裹，就像响应式设计一样。