Question

我有一个包含4个项目的nav元素。当我点击任何元素时，我注意到项目稍微移开，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;
}

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

1 个答案: