html - 导航菜单从容器中溢出

Question

又是早上...,

抱歉打扰大家，但我需要更多帮助...我已经很久没有真正编写代码了，所以这里开始...

我正在尝试制作一个水平导航菜单，这是我的 html

<nav>
<ul id="navmenu">
   <li><a href="" title="" class="selected">Link 1</a></li>
   <li><a href="" title="">Link 2</a></li>
   <li><a href="" title="">Link 3</a></li>
   <li><a href="" title="">Link 4</a></li>
   <li><a href="" title="">Link 5</a></li>
<ul>
<nav> 

现在我有以下 CSS

/* menu */
ul#navmenu{ 
    border-top:1px solid #FFF;
    background:#e60000;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left:30px;
}

ul#navmenu li{
    display:inline;

}

ul#navmenu li a{
    color:#fff;
    text-decoration:none;
    /*
    padding-left:15px;
    padding-right:15px;
    */
    padding:15px 15px 15px 15px;
}

ul#navmenu li a.selected{
    color:#e60000;
    text-decoration:none;
    /*
    padding-left:15px;
    padding-right:15px;
    */
    padding:15px 15px 15px 15px;
    background:#fff;
}

我希望链接位于 Li 的中心，看起来像这样:

然而，容器 UL 似乎并不包含 LI，它们从容器中渗出。我玩过溢出和行高，但似乎没有任何效果……这是最坏的情况……

有没有人有什么想法？

Answer 1

将 display:block 显示给你的 <a>因为<a>在inline元素如此，inline元素不带vertical margin , vertical padding , width & height

检查这个http://jsfiddle.net/T8eNe/2/

但首先关闭你的UL & NAV