Question

应用程序必须适合1024x768

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

<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上有灰色背景 - >如果项目的宽度超过1024px，项目应该换行到下一行 - 而且它们确实如此，但灰色背景不存在，除了IE7中的奇怪 - 非常烦人的问题。非常感谢任何帮助。

Answer 1

由于您在菜单中浮动所有内容，因此IE无法正确识别ul中包含的内容。你可以通过添加以下规则轻松解决问题：

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

Answer 2

这听起来像是溢出问题。将overflow: auto添加到您的#menu样式中。在IE中，您可能需要强制使用hasLayout，您可以使用zoom: 1执行此操作。

菜单浮动左侧的无序列表无法进行换行

2 个答案: