悬停时下划线变窄

Question

我有以下代码，而对于活动页面和鼠标悬停时，在文本的底部都有粗线。但是，该行比文本本身更长。如何使行的大小与文本的大小完全相同（在宽度上）。

<style>
#nav-aaa ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #eeeeee;
  background-color: #eeeeee;
  text-align:center;
}

#nav-aaa li {
  display:inline;
}

#nav-aaa li a {
  display:inline-block;
  color: #000000;
   padding: 14px 20px;
  text-decoration: none;
}

#nav-aaa li a:hover:not(.active) {
  border-bottom: 3px solid #06A6E4;
}

#nav-aaa li a.active {
  border-bottom: 3px solid #06A6E4;
  color: #06A6E4;
  

}
</style>

<div id="nav-aaa">
<ul>
  <li><a class="active" href="http://localhost/mysite/1">Test 1</a></li>
  <li><a href="http://localhost/mysite/2">Test 2</a></li>
  <li><a href="http://localhost/mysite/3">Test 3</a></li>
  <li><a href="http://localhost/mysite/4">Test 4</a></li>
<li><a href="http://localhost/mysite/5">Test 5</a></li>
<li><a href="http://localhost/mysite/6">Test 6</a></li>
</ul>

</div>

Answer 1

用于#nav-aaa li a，使用padding进行上下移动，使用margin进行右-左移动。

#nav-aaa ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #eeeeee;
  background-color: #eeeeee;
  text-align:center;
}

#nav-aaa li {
  display:inline;
}

#nav-aaa li a {
  display:inline-block;
  color: #000000;
  padding: 14px 0; /* i changed */
  margin:0 20px; /* i added */
  text-decoration: none;
}

#nav-aaa li a:hover:not(.active) {
  border-bottom: 3px solid #06A6E4;
}

#nav-aaa li a.active {
  border-bottom: 3px solid #06A6E4;
  color: #06A6E4;
  

}

<div id="nav-aaa">
<ul>
  <li><a class="active" href="http://localhost/mysite/1">Test 1</a></li>
  <li><a href="http://localhost/mysite/2">Test 2</a></li>
  <li><a href="http://localhost/mysite/3">Test 3</a></li>
  <li><a href="http://localhost/mysite/4">Test 4</a></li>
<li><a href="http://localhost/mysite/5">Test 5</a></li>
<li><a href="http://localhost/mysite/6">Test 6</a></li>
</ul>

</div>