Question

我正在尝试在我的固定导航栏上添加带有2px的border-top但是在href悬停时它会将所有导航项目向下推2px，我试图让它变得如此静止，任何帮助表示赞赏。

＆＃13;

     .fixed-nav-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      width: 100%;
      height: 70px;
      background-color: #3f3f3f;
    }
    
    .fixed-nav-bar li, .fixed-nav-bar a {
    height: 0 auto;
      line-height: 50px;
      width: 100px;
      overflow: hidden;
    }
    .menu {
      width: 90%;
      max-width: 960px;
      margin: 0 auto;
      text-align: center;
    }
    .menu a, .menu a:visited {
      color: #ffffff;
      overflow: hidden;
    }
    .menu a:hover, .menu a:target {
    display: block;
    border-top: 2px solid #72BCD4;
    color: #72BCD4;
    }
    
    .menu-items { display: inline-block; }
    
    
    .menu-items li {
      display: inline-block;
      margin-right: 10px;
      margin-left: 10px;
    }
    .menu-items a {
      text-decoration: none;
    }
    
    .show, .hide {
      display: none;
      padding-left: 15px;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: center left;
      color: #dde1e2;
    }
    .show {
      background-image: url(../assets/down-arrow-icon.png);
    }
    .hide {
      background-image: url(../assets/up-arrow-icon.png);
    }

＆＃13;

        <nav class="fixed-nav-bar">
            <div id="menu" class="menu">
              <!-- Example responsive navigation menu  -->
              <a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
              <ul class="menu-items">
                <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">HOME</a></li>
                <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">ABOUT</a></li>
                <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">DESIGNS</a></li>
                <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">CONTACT</a></li>
            </ul>
            </div>
          </nav>

＆＃13;

Answer 1

因为没有边界。要么使用相同宽度的透明边框，要么使用边框的颜色。但在你的情况下，它搞砸了。所以我更改了overflow: hidden并使用了margin-top: -2px：

＆＃13;

.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  height: 70px;
  background-color: #3f3f3f;
}

.fixed-nav-bar li, .fixed-nav-bar a {
  height: 0 auto;
  line-height: 50px;
  width: 100px;
}
.menu {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.menu a, .menu a:visited {
  color: #ffffff;
}
.menu a:hover, .menu a:target {
  display: block;
  border-top: 2px solid #72BCD4;
  color: #72BCD4;
  margin-top: -2px;
}

.menu-items {
  display: inline-block;
}

.menu-items li {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
}
.menu-items a {
  text-decoration: none;
}

.show, .hide {
  display: none;
  padding-left: 15px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center left;
  color: #dde1e2;
}
.show {
  background-image: url(../assets/down-arrow-icon.png);
}
.hide {
  background-image: url(../assets/up-arrow-icon.png);
}

＆＃13;

<nav class="fixed-nav-bar">
  <div id="menu" class="menu">
    <!-- Example responsive navigation menu  -->
    <a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
    <ul class="menu-items">
      <li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">HOME</a></li>
      <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">ABOUT</a></li>
      <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">DESIGNS</a></li>
      <li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">CONTACT</a></li>
    </ul>
  </div>
</nav>

＆＃13;

Answer 2

这完全是因为box-sizing属性。默认情况下，它会在内容区域之外添加填充/边距/边框的值，因此元素会变大。只需定义全局* {box-sizing: border-box;}，它就会将元素设置为固定大小。这意味着如果元素没有边框，然后它添加，元素的内容区域将更小，但整个大小将是相同的。但是，我强烈建议您在开头使用border，否则，它会跳转到元素内部。您可以将颜色设置为透明的＆＃39;它不会被看见。然后只需更改边框颜色就可以了。

Answer 3

我创造了一个小小的提琴手：

https://jsfiddle.net/marco_rensch/0hva2241/

这可能是一个可能的解决方案 checkout CSS代码在第31行和第51行之间更改

关键是为li添加一个透明的默认边框2px并通过悬停更改它：

.menu-items li:hover{border-top: 2px solid #72BCD4;}

横幅图像内的白色框

3 个答案: