导航菜单渗出容器再次

问题描述：

对不起，打扰大家，但我需要更多的帮助......我没有在年龄做任何真正的编码所以这里去...

我试图做一个横向导航菜单，这里是我的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; 
}

我想链接到李的中心坐着看是这样的：

enter image description here

但是含有UL似乎并没有包含LIS，它们渗出的容器。我曾与溢流管的高度，但没有起到周围似乎工作......这里是一个最坏的情况下...

enter image description here

没有任何一个有什么想法？

http://jsfiddle.net/u8XeA/9/这种事情？ – obkso 2012-03-29 11:05:53

答

给予显示：块到您的<a>因为<a>在inline元左右，inline元素不采取vertical margin，vertical padding，width & height

入住这http://jsfiddle.net/T8eNe/2/

但首先关闭UL & NAV

你的意思是内嵌块...谢谢anywway我不能相信我错过了！ – 2012-03-29 11:06:47

这不是问题，问题是包含的元素没有扩展到其子级的大小。 – 2012-03-29 11:06:51

答

对于初学者来说，我很害怕d正确地关闭<ul>和<nav>标签，然后检查以确保父容器已左移。

答

给inline-block到你的锚

ul li a { display: inline-block; }

导航菜单渗出容器再次

相关推荐