Question

我正在尝试使用CSS菜单，所有东西似乎都在工作，除了最后3个子弹断开了新线......它们都应该是水平的。什么出错了？（（并且...如果你在这里查看现场网站＆gt;＆gt; www.runic-paradise.com＆gt;＆gt;任何人都知道如何通过拉伸灰色容器盒来停止菜单下拉菜单？： - / ））

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

Answer 1

我在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;">
...

当我删除所有这些列表元素菜单后，确定。

Answer 2

请将ul.menu宽度增加500px至700px。希望它能解决你的问题。

CSS菜单闯入新线

2 个答案: