html - CSS 菜单换行

Question

我正在尝试使用 CSS 菜单，一切似乎都正常，除了最后 3 个元素符号正在换行......它们应该都是水平的。对出了什么问题有什么想法吗？ ((而且......如果你在这里查看现场网站 >> www.runic-paradise.com >> 任何人都知道一种方法来阻止菜单下拉菜单拉伸(stretch)灰色容器框？:-/))

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

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