Почему мой второй div действует так, как будто у него установлен верхний предел?

#html #css

#HTML #css

Вопрос:

У меня есть два div, настроенных с

 display: inline-block.

Я не знаю почему, но второй div всегда немного опускается по сравнению с первым

div

точно так же, как у него будет настроен верхний предел. Как сделать второй div полностью встроенным в первый div и как расположить

 <ul>

вертикально и горизонтально в центре второго div?

Вот Codepen: http://codepen.io/anon/pen/EJhBK

Границы не предусмотрены в окончательном проекте. Я разместил их, чтобы визуально показать положение каждого divs.

Спасибо!

Ответ №1:

 #nav {
width: 446px;
display: inline-block;
border: 1px solid green;
  vertical-align:top
}

добавьте выравнивание, это должно сработать.

1. Спасибо за такой быстрый ответ. Я попробую это прямо сейчас.

2. Правильно ли это, если затем я добавлю position:absolute к моему <ul> и попытаюсь расположить его в середине навигационного контейнера? Или есть лучший способ?

3. @Danny_Student Ты можешь. Я бы использовал position: relative; в родительском контейнере ( <div id="nav"> ), чтобы <ul> он был расположен абсолютно относительно #nav , а не абсолютен для документа.

4. Owkie dowkie. Кстати. просто интересно — почему область элемента nav расширилась, когда я добавил верхний край к элементу <ul> ? Я думал, что такое происходит, только если я добавлю дополнение.

Ответ №2:

удалите display: inline-block; и используйте float:left

1. Но для какого элемента? Первый div, который является «логотипом» или «навигацией»? И нужно ли мне после этого делать так называемые «очищающие поплавки»? Спасибо

2. поместите его в элемент #nav, вам не нужно выполнять очистку поплавков

3. Спасибо за ответы. Я уже использовал метод, предложенный @Mathijs Segers