将鼠标悬停在导航链接上时如何删除空格？

Question

我是新手，正在建立我的第一页。我正在为我的网站进行导航。我主要用它来获取所需的内容，但是当我将鼠标悬停在链接上时，剩余的鼠标悬停框会出现很小的空间。它在边框和悬停框之间有一个很小的空间。请帮忙。

因此，堆栈溢出不会让我在不多说的情况下发布问题，因此我将进行一些讨论。关于随机的东西。胡说八道，直到它允许我发布该死的问题为止。我不知道我需要多少细节，因为它不会让我仅张贴Codepen链接。这样做似乎容易得多。

* {
  box-sizing: border-box;
}

#bar {
  text-align: center;
  min-width: 100%;
  height: 70px;
  position: relative top;
  vertical-align: top;
  background-color: #24284C;
}

#wrapper {
  background-color: #3B3F64;
}

nav {
  width: 100%;
  letter-spacing: 0.1em;
}

nav a {
  text-decoration: none;
  display: block;
  padding: 25px;
  border-right: #3B3F64 1px solid;
  color: black;
}

nav ul {
  list-style-type: none;
}

nav li {
  display: inline-block;
}

nav a:link {
  color: #ffffff;
}

nav a:visted {
  color: purple;
}

nav a:focus {
  color: gray;
}

nav a:hover {
  background-color: #4b4f75;
  border-bottom: gray 2px solid;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #090C26;
}

header {
  width: 100%;
  padding: 0%;
  margin: 0%;
  font-size: 250%;
  height: 100px;
}

main {
  margin: auto;
  width: 80%;
  padding: 10px;
  overflow: auto;
}

h1 {
  text-align: center;
}

footer {
  background-color: #24284c;
  font-size: small;
  font: italic;
  text-align: center;
}

<div id="wrapper">
  <header>
    <h1 id="big">Angry Nerd Cafe</h1>
  </header>
  <div id="bar">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="location.html">Location</a></li>
        <li><a href="calendar.html">Calendar</a></li>
        <li><a href="order.html">Order</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
  <main>
    <h1>About us</h1>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
      incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>

  </main>
  <footer>
    Copyright &copy; 2018 <a href="mailto:joshuamwolfe@gmail.com">
    joshuamwolfe@gmail.com </a>
  </footer>
</div>

Answer 1

当文档中HTML元素之间存在空格时，

inline-block元素不会彼此齐平。有几种方法可以解决此问题，但我建议在这里使用flexbox。

更改此：

nav ul {
  list-style-type: none;    
}

nav li {
  display: inline-block;
}

...对此：

nav ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
}

下面的演示

* {
  box-sizing: border-box;
}

#bar {
  text-align: center;
  min-width: 100%;
  height: 70px;
  position: relative top;
  vertical-align: top;
  background-color: #24284C;
}

#wrapper {
  background-color: #3B3F64;
}

nav {
  width: 100%;
  letter-spacing: 0.1em;
}

nav a {
  text-decoration: none;
  display: block;
  padding: 25px;
  border-right: #3B3F64 1px solid;
  color: black;
}

nav ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
}

nav a:link {
  color: #ffffff;
}

nav a:visted {
  color: purple;
}

nav a:focus {
  color: gray;
}

nav a:hover {
  background-color: #4b4f75;
  border-bottom: gray 2px solid;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #090C26;
}

header {
  width: 100%;
  padding: 0%;
  margin: 0%;
  font-size: 250%;
  height: 100px;
}

main {
  margin: auto;
  width: 80%;
  padding: 10px;
  overflow: auto;
}

h1 {
  text-align: center;
}

footer {
  background-color: #24284c;
  font-size: small;
  font: italic;
  text-align: center;
}

<div id="wrapper">
  <header>
    <h1 id="big">Angry Nerd Cafe</h1>
  </header>
  <div id="bar">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="location.html">Location</a></li>
        <li><a href="calendar.html">Calendar</a></li>
        <li><a href="order.html">Order</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
  <main>
    <h1>About us</h1>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
      incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>

  </main>
  <footer>
    Copyright &copy; 2018 <a href="mailto:joshuamwolfe@gmail.com">
    joshuamwolfe@gmail.com </a>
  </footer>
</div>