Вертикальное выравнивание списка навигации inline-block в разделе

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>

и вот эффект, которого я достигну:

Итак, проблемы:

1. После наведения курсора на элемент меню, padding-top и padding-bottom слишком велики, они должны быть 11px, а сейчас, вероятно, 19px

2. В соответствии с margin-top в ".nav li" моя навигационная панель должна быть выровнена по вертикали, но это слишком много в нижней части, если я установлю margin-top: 0px;, все еще есть пробел над моей навигационной панелью, почему?

3. После того, как я указываю на любой элемент меню курсором, все элементы меню сдвигаются на 1 пиксель вниз, почему?

Спасибо за ваши ответы, я искал ответы около 2 часов и все еще не нашел их... пожалуйста, помогите мне..

Answer 1

Вот мой лучший ответ на ваши вопросы:

1) Дополнение в дополнение к вашему тексту. Например, с Firebug я вижу, что OFERTA имеет высоту 15px. Добавьте 11 пикселей сверху и снизу, и вы получите 37 пикселей. Чтобы увеличить его до 11px, вам нужно уменьшить размер шрифта и добавить минимальный отступ. Если вас не волнует, пока пункт меню не слишком большой, просто опустите вертикальный отступ в

padding: 11px 30px;

2) По умолчанию элемент ul имеет некоторые поля. Установите поле на 0 для навигации, чтобы удалить его.

3) Ранее, перед наведением курсора, правила CSS утверждали, что пункт меню не имеет границы. На nav li:hover CSS добавляет рамку, которая увеличивает общую площадь, и чтобы компенсировать и оставаться в центре, текст перемещается немного вниз. Исправление было бы добавить границу к навигационной панели.

Также,

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

кажется неуместным. В нем отсутствует открывающая скобка и идентификатор.

Answer 2

Номер 1 прекрасно работает на 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, добавить float: left на вашем.logo и удалите position: absolute

• Для № 3, Удалить border: 1px solid #333 на .nav li:hover