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

Question

我刚刚开始为一个朋友设计我的第一个网页设计项目，我正在尝试制作一个响应式页面。当我将固定导航 link 项目的边距从像素更改为百分比时，它会导致元素在悬停在任何导航项目上时掉落。 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

您没有考虑边界占用的 space。

您将从

Home      to      | Home

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

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

这里还有一个jsfiddle。

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

Hover effect causes floated navigation item to drop out of its containing element after making padding a percentage instead of pixels?

html

css

responsive-design

css-position

margins