html - 悬停效果导致 float 导航项在填充百分比而不是像素后从其包含元素中消失？

Question

我刚刚开始为一个 friend 设计我的第一个网页设计元素，我正在尝试制作一个响应式页面。当我将固定导航链接项的边距从像素更改为百分比时，它会导致元素在悬停在任何导航项上时掉落。HTML

    <header>
    <div id="fixedLinks">
      <a href="#">About</a>
      <a href="#">Resume</a>
      <a href="#">Contact</a>
    </div>
    <div id="socialMedia">
      <a href="http://facebook.com"><img class="socialIcons" id="facebook" src="1438210007_social_facebook_box_blue.png"/></a>
      <a href="http://twitter.com"><img class="socialIcons" id="twitter" src="1438210015_social_twitter_box_blue.png"></a>
      <a href=http://linkedin.com><img class="socialIcons" id="linkedIn" src="1438210011_social_linkedin_box_blue.png"/></a>
    </div>
  </header>

CSS

 header{
  z-index: 1;
  position:fixed;
  width:100%;
  height: 30px;
  background-color:#2F2F2F;
  box-shadow: 0rem 0rem 1rem .1rem black;
}

#fixedLinks{
  float:left;
  font-size:1.5rem;
  font-family:EB Garamond;
  margin-left:.75%;
}

#fixedLinks a{
  color:#9B9B9B;
  text-decoration:none;
  display: inline-block;
  padding-left:1%;
  padding-right:1%;
}

#fixedLinks a:hover{
  border-left: solid 1px white;
}

就像我说的，只有当我使用 1% 的内边距而不是 10px 时才会这样。

Answer 1

您没有考虑边框占用的空间。

你要从

Home      to      | Home

你需要在你的填充中考虑到这一点，我用过它并且它对我有用。

#fixedLinks a{
  color:#9B9B9B;
  text-decoration:none;
  display: inline-block;
  padding-left:.9%;
  padding-right:.9%;
}

这是一个jsfiddle