Question

我有一个这种风格的导航菜单。该菜单在Chrome上非常完美，但在其他浏览器和某些Firefox版本中，菜单显示为2行。我不能得到这行CSS“填充：0 0.73em;”适用于所有浏览器。

.mainnav ul {
 list-style-type:none;
 margin:0;
 padding:0;
 overflow:hidden;
}
.mainnav ul li {
 float:left;
}
.mainnav ul li a:link,.mainnav ul li a:visited {
 display:block;
 font-size:13px;
 font-weight:bold;
 color:#FFFFFF;
 background-color:#B79527;
 text-align:center;
 padding:4px;
 text-decoration:none;
 text-transform:uppercase;
 margin:0;
 padding: 0 0.73em;
 height: 28px;
 line-height: 28px;
 position:relative;
 white-space:nowrap;
}
.mainnav ul li a:hover,.mainnav ul li a:active {
 background-color:#9A7C1C;
}
#firstmenu {
 background:#7A4AAD;
 padding-left: 6px;
}

这是HTML

<div class="mainnav">
 <ul>
  <li id="firstmenu"><a href="default.html">Home</a></li>
  <li><a href="news.html">Group News</a></li>
  <li><a href="about_us.html">About us</a></li>
  <li><a href="vision.html">Vision Message and Mission</a></li>
  <li><a href="group_activities.html">Group Activity</a></li>
  <li><a href="charmain.html">Chairman's Message</a></li>
  <li><a href="jobs.html">Jobs</a></li>
  <li><a href="contacts.html">Contact us</a></li>
 </ul>
</div>

即使Firefox在不同的机器上也能给我不同的结果。

Answer 1

你知道在.mainnav ul li a:link,.mainnav ul li a:visited中有双填充decalarations吗？

padding:4px;
padding: 0 0.73em;

您可以将这些结合起来：

padding: 4px 0.73em;

似乎导航列表的问题在于它们之间的间距太大，并且与项目数量相结合。我有太多的项目，正常的行为是包装，你可以减少间距，字体大小来解决这个问题。

我的水平导航菜单在chrome中显示为1行，其他显示2行

1 个答案: