0

I'm new and building one of my first pages. I'm working on the nav for my site. I have it mostly how I want it but when I hover over a link there is a small space to the leftover hover box. its a small space between the border and the hover box. Please help.

So the stack overflow won't let me post the question without talking a little bit more so I am going to ramble a bit. About random things. Talk nonsense until it allows me to post the damn question. I don't know how much detail I need when it won't let me post just a codepen link. It seems much easier to do that.

* {
  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>

4

1 回答 1

1

inline-block当文档中的 HTML 元素之间存在空格时，元素不会相互对齐。有一些技巧可以解决这个问题，但我建议在这里使用 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>

于 2018-09-16T12:32:07.980 回答