CSS 边框未完全应用

Question

这是我的代码:

ul li {
  display: inline-block;
  position: relative;
  top: -15px;
  width: 800px;
  border: 1px solid gray;
}
#home {
  position: relative;
  margin-left: -35px;
  display: inline-block;
}

<nav>
  <ul>
    <li><a class="vari" href="..." id="home"><span>Home</span></a> 
    </li>
    <li><a class="vari" href="">Music videos</a> 
    </li>
  </ul>
</nav>

“音乐视频”文本没有全边框，但有些东西和“主页”文本没有任何边框 — 为什么？

我想要它们的边框和宽度均为 800 像素。

Answer 1

请检查这个 fiddle Demo .因为您需要在一行中同时显示两个菜单，所以我在 a 上使用了 display:inline-block，在 ul 上使用了边框。希望这会解决您的问题。泰