0

我有一个这种风格的导航菜单。该菜单在 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 在不同的机器上给我不同的结果。

4

1 回答 1

0

你知道在：.mainnav ul li a:link,.mainnav ul li a:visited有双重填充声明？

  1. padding:4px;
  2. padding: 0 0.73em;

你可以结合这些：

padding: 4px 0.73em;

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

于 2013-06-21T11:57:03.383 回答