导航菜单从容器中流出

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

显示：阻止<a>，因为<a>元素中的inline因此，inline元素未采用vertical margin，vertical padding， width＆amp; height

选中此http://jsfiddle.net/T8eNe/2/

但请先关闭UL＆amp; NAV

Answer 2

对于初学者，我会正确关闭<ul>和<nav>标签，然后检查以确保父容器向左浮动。

Answer 3

将inline-block提供给你的主播

ul li a { display: inline-block; }