0

我一直在为我的网站构建一个菜单栏，除了每次我尝试调整浏览器宽度进行测试时，我的菜单都会变成一个拥挤在左侧的列表。我尝试添加，display: inline-block但white-space: nowrap它不起作用。有任何想法吗？

错误截图： 在此处输入图像描述

HTML：

 <div id="header" class="row">  
     <ul class="nav-bar">
                <div class="large-2 columns"><li data-slide="1"><a href="">home</a></li></div>                      
                <div class="large-3 columns"><li data-slide="2"><a href="">portfolio</a></li></div>
                <div class="large-2 columns"><li class="logo"><img src="images/logo.png" /></li></div>
                <div class="large-2 columns"><li data-slide="3"><a href="">about</a></li></div>
                <div class="large-3 columns"><li data-slide="4"><a href="">contact</a></li></div>
            </ul>
</div>

CSS：

div#header {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    color: #FFF;
    /*position: relative;*/
    top: 0;
}
div#header ul{
    height: 128px;
    list-style-type: none;
    white-space: nowrap;
}
div#header ul li {
    display: inline-block;
    background-color: #003264;  
    text-align: center;
    height: 128px;
    line-height: 128px;
    /*padding-left: 15px;
    padding-right: 15px;*/
    font-size: 36px;
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
}

网站：http ://andrewgu12.kodingen.com/

4

2 回答 2

0

  1. div.large-*在标签内移动li标签。

  2. 指定最小宽度（或宽度）#header ul

于 2013-07-29T19:10:16.507 回答
0

发生这种情况的原因是，一旦屏幕宽度充分减小，Foundation 就会使用其备用（小屏幕）CSS。由于您没有“小”宽度（只有“大”宽度），因此 Foundation 默认情况下会将您的列扩展为 100% 的宽度。

这可以仅使用 Foundation 的预定义类来解决，无需修改 CSS。对于您的.nav-bar孩子，只需指定一个“小”宽度即可。

<ul class="nav-bar">
    <div class="large-2 small-2 columns"><li data-slide="1"><a href="">home</a></li></div>                      
    <div class="large-3 small-3 columns"><li data-slide="2"><a href="">portfolio</a></li></div>
    <div class="large-2 small-2 columns"><li class="logo"><img src="images/logo.png" /></li></div>
    <div class="large-2 small-2 columns"><li data-slide="3"><a href="">about</a></li></div>
    <div class="large-3 small-3 columns"><li data-slide="4"><a href="">contact</a></li></div>
</ul>

这似乎解决了我的问题。如果这不是您想要的，请随时告诉我，我很乐意为您提供进一步的帮助。祝你好运！

于 2013-07-29T19:18:54.747 回答