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>

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

我想要两个边框和宽度都为 800px。

Answer 1

您需要删除左边距属性:

#home {
    position:relative;
    display:inline-block;
}

尝试检查此代码笔：http://codepen.io/anon/pen/LVwdXj

Answer 2

检查此 link https://jsfiddle.net/5n6e5vx9/ 。从家庭 ID 中删除边距左侧

#home {
position:relative;
//margin-left:-35px;
display:inline-block;
}

Answer 3

请试试这个：

Demo

Css代码：

  ul li {
  display: inline-block;
  position: relative;
  top: -15px;
  width: 800px;
  border: 1px solid gray;
}
#home {
   position:relative;
    display:inline-block;
    text-decoration:none;
    padding:5px;
}
#music
{
   text-decoration:none;
    padding:5px;
}

Answer 4

删除 margin-left:-35px;，因为属性使 'Home' 远离边界。

Answer 5

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

CSS 边框未完全应用

CSS border not being applied fully

html

css

border