菜单浮动Unorderd列表左边不能让包装

我们有各种不同的长度菜单 - 有时菜单看起来像这样...

<ul> 
    <li><a>link 1</a></li> 
    <li><a>link 2</a></li> 
    <li><a>link 3</a></li> 
</ul>

在其他用户/角色能有更多这样的...

<ul> 
    <li><span>link 1</span></li> 
    <li><span>link 2</span></li> 
    <li><span>link 3</span></li> 
    <li><span>link 4</span></li> 
    <li><span>link 5</span></li> 
    <li><span>link 6</span></li> 
</ul>

和CSS的样子：

#menu 
{ 
    list-style-type: none; 
    min-height: 30px; 
    margin-bottom: 15px; 
    background:#E5E5E5; 
    padding-left: 35px; 
    border-bottom:1px solid #CCC; 
} 
#menu li 
{ 
    min-height:30px; 
    border-right:1px solid #CCC; 
    border-left:1px solid #FFF; 
    padding:0px 10px; 
} 
#menu li span 
{ 
    display: block; 
} 
#menu li, #menu li span 
{ 
    float: left; 
    height: 30px; 
    line-height: 30px; 
    text-align:center; 
}

有针对UL灰色背景 - >如果物品的宽度超过1,024像素的物品应该换到下一行 - 和他们做，但灰色背景是不存在的，除了奇怪的是在IE7 - 很烦人的问题。任何帮助不胜感激。

来源

2011-01-27 maehue

如果您在[JS Bin]（http://jsbin.com）上创建了一个示例页面，这将会非常有帮助。 – thirtydot 2011-01-27 04:27:32

因为你浮在菜单中的一切，IE浏览器不能正确识别的内容包含与ul。 YOu可以通过添加这些规则轻松修复：

#menu { 
    overflow: hidden; // ensures container wraps child content 
    zoom: 1; // needed to trigger hasLayout in IE6 
}

来源

2011-01-27 12:13:01

做到了 - 谢谢。 – maehue 2011-01-29 17:52:56

这听起来像一个溢出的问题。将overflow: auto添加到您的#menu风格。在IE中你可能不得不强制hasLayout，你可以用zoom: 1来做到这一点。

来源

2011-01-27 09:30:26 Chris

菜单浮动Unorderd列表左边不能让包装

回答

相关问题