0

我正在尝试使用 CSS 菜单，除了最后 3 个项目符号中断成新行之外，一切似乎都正常工作......而且它们都应该是水平的。对出了什么问题有任何想法吗？（（而且...如果您查看此处的实时站点>> www.runic-paradise.com >> 有人知道阻止菜单下拉菜单拉伸灰色容器框的方法吗？:-/））

HTML：  

 <ul class="menu">
        <li class="green">
            <p><a href="#">Home</a></p>
            <p class="subtext">The front page</p>
        </li>
        <li class="yellow">
            <p><a href="#">About</a></p>
            <p class="subtext">More info</p>
        </li>
        <li class="red">
            <p><a href="#">Contact</a></p>
            <p class="subtext">Get in touch</p>
        </li>
        <li class="blue">
            <p><a href="#">Submit</a></p>
            <p class="subtext">Send us your stuff!</p>
        </li>
        <li class="purple">
            <p><a href="#">Terms</a></p>
            <p class="subtext">Legal things</p>
        </li>
    </ul>

CSS：

ul.menu{
    height: 50px;
    list-style: none outside none;
    margin: 0 auto;
    width: 500px;
}

/*li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}*/

a{
    color:#FFF;
    text-decoration:none;
}

p{
    padding: 0px 5px;
}

    .subtext{
        padding-top:15px;
    }

ul.menu li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

/*Menu Color Classes*/
.green{
    background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;
}    
.yellow{
    background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;
}    
.red{
    background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;
}    
.purple{
    background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;
}    
.blue{
    background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;
}
4

2 回答 2

3

我在 Chrome 开发工具中打开了您的网站，发现以下内容

<ul class="menu">
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <li class="green" style="overflow: hidden; height: 150px;">
... </li>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <li class="yellow" style="overflow: hidden; height: 50px;">
...

当我从列表元素菜单中删除所有这些 nbsp 时，一切正常。

于 2013-11-01T18:45:12.023 回答
0

请将 ul.menu 宽度从 500 像素增加到 700 像素。希望它能解决你的问题。

于 2013-11-01T18:39:00.240 回答