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

Question

我有一个这种风格的导航菜单。菜单在 Chrome 上是完美的，但在其他浏览器和某些 Firefox 版本上，菜单显示为 2 行。我无法获得这行 CSS“padding: 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 中有双填充声明？

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

你可以组合这些:

padding: 4px 0.73em;

导航列表的问题似乎在于它们之间的间距太大以及元素的数量。我有太多元素，正常行为是换行，您可以减少间距、字体大小来解决这个问题。