Question

我在html和css中打招呼，我正在建立我的第一个基于我的psd项目的网站，我刚刚开始制作它，我无法解决一个问题。

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.grid {
  margin: 0 auto;
  width: 960px;
}
.primary-header {
  position: relative;
  background-color: #fff;
  height: 85px;
}
.logo {
  position: absolute;
  top: 29px;
}
.primary-nav {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.nav {
  text-align: right;
}
.nav li {
  display: inline-block;
  vertical-align: top;
  margin: 0 30px;
  padding: 11px 30px;
}
.nav li:hover {
  border: 1px solid #333;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
}
.nav li:last-child {
  margin-right: 0;
}
border:1px solid #333;
 border-radius:5px;
 background-color:#333;
 padding-bottom:10px;
 color:#fff;

}
.nav li:last-child {
  margin-right: 0;
}

<header class="primary-header">

  <div class="grid group">

    <a href="index.html">
      <img src="http://i58.tinypic.com/2q2prah.png" class="logo" alt="logo">
    </a>

    <nav class="nav primary-nav">
      <ul>
        <li>O firmie</li>
        <!--
  				-->
        <li>Oferta</li>
        <!--
  				-->
        <li>Realizacje</li>
        <!--
  				-->
        <li>Kontakt</li>
      </ul>
    </nav>

  </div>

</header>

这就是我要达到的效果：

enter image description here

所以问题是：

用光标指向菜单元素后，填充顶部和填充底部太大，应该是11px，现在它可能是19px
根据“.nav li”中的margin-top，我的导航应该是垂直对齐的，但是底部有点太多，如果我设置margin-top：0px;，仍然有一些空白区域在我的导航之上，为什么？
在我用光标指向任何菜单元素后，所有菜单元素都会向下移动1px，为什么？

感谢您的回答，我正在寻找大约2个小时的答案，我仍然没有找到它...请帮助我..

Answer 1

以下是我对你的问题的最佳回复：

1）填充是文本的补充。例如，使用Firebug，我可以看到OFERTA被测量为15px高。在顶部和底部添加11px，你得到37px。要使它达到11px，你将不得不减少字体大小并添加最小的填充。如果您不关心菜单项不是太大，那么只需降低

中的垂直填充

padding: 11px 30px;

2）默认情况下，ul元素有一些边距。将边距设置为0以便导航将其删除。

3）以前，在悬停之前，CSS规则声明菜单项没有边框。在nav li：hover上，CSS添加了一个边框，它增加了整个区域并补偿并保持在中心，文本稍微向下移动。修复方法是为nav li添加边框。

另外，

border:1px solid #333;
border-radius:5px;
background-color:#333;
padding-bottom:10px;
color:#fff;
}

似乎不合适。它缺少一个左大括号和一个标识符。

Answer 2

在我的机器上，IE11在IE11上呈现正常。显示11px padding-top和-bottom。所以这是应该的。也许不是很理想？

第2号是由UL的余量引起的，它是12px。

.nav ul {
      margin-top: 0px;
}

3号是由悬停时添加的边框引起的。您需要使用额外的填充或将透明边框设置为nav.li

.nav li {
  display: inline-block;
  vertical-align: top;
  margin: 0 30px;
  padding: 11px 30px;
  border: 1px solid transparent;
}

Answer 3

对于＃1，尝试将.nav li上的填充从padding: 11px 30px减少到padding: 5px 30px
对于＃2，在.logo上添加float: left并移除position: absolute
对于＃3，删除border: 1px solid #333上的.nav li:hover

在部分中垂直对齐内联块导航列表

3 个答案: