单击时导航中的项目会稍微分开

Question

我有一个包含 4 个项目的导航元素。当我单击任何元素时，我注意到这些项目稍微分开，并且 div 展开。

<div id="siteNavigation" class="navDiv">
  <nav>
    <ul>
      <li><span><a href="index.html" class="selected">Home</a></span></li>
      <li><a href="resources\waiting_room.jpg">Meet Me</a></li>
      <li><a href="resources\waiting_room.jpg">About</a></li>
      <li><a href="resources\waiting_room.jpg">Contact</a></li>
    </ul>
  </nav>
</div>


.navDiv {
  display: inline;
  width: auto;
  float: right;
  border: solid;
}

nav ul {
  clear: both;
  list-style-position: inside;
  clear: left;
  list-style: none;
  margin-left: 0;
  width: auto;
  padding-top: 32px;
  text-align: center;
  white-space: nowrap;
}

nav ul li {
  display: inline-block;
  white-space: nowrap;
  padding-left: 8px;
  border: none;
}

nav ul li a {
  color: #000000;
  /* #E3CF9C */
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0.05em;
  padding: 10px 3.125% 26px 3.125%;
  text-transform: uppercase;
  border: none;
}

nav ul li a:hover {
  color: #BF0000;
}

nav ul li a.selected {
  color: #BF0000;
}

nav ul li a.selected:hover {
  color: #E3CF9C;
}

JSFiddle 示例：https://jsfiddle.net/rfhasw48/1/

我需要更改什么才能使导航保持恒定大小？

Answer 1

只需删除 nav ul li a 中的填充即可。

已更新CSS：

    .navDiv {
  display: inline;
  width: auto;
  float: right;
  border: solid;
}

nav ul {
  clear: both;
  list-style-position: inside;
  clear: left;
  list-style: none;
  margin-left: 0;
  width: auto;
  padding-top: 32px;
  text-align: center;
  white-space: nowrap;
}

nav ul li {
  display: inline-block;
  white-space: nowrap;
  padding-left: 8px;
  border: none;
}

nav ul li a {
  color: #000000;
  /* #E3CF9C */
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
}

nav ul li a:hover {
  color: #BF0000;
}

nav ul li a.selected {
  color: #BF0000;
}

nav ul li a.selected:hover {
  color: #E3CF9C;
}

单击时导航中的项目会稍微分开

Items in nav shift apart slightly when clicked

html

css

nav