Display:block не складывает элемент навигации

У меня возникли небольшие проблемы с тем, чтобы элемент навигации действительно вел себя как блочный элемент. Я попытался сделать меню из тегов nav и a вместо обычных тегов ul и li. Это пошло не так, как планировалось. Мои меню появляются одно за другим, как будто display:block css не имеет никакого эффекта. Я хотел бы, чтобы меню складывались, а не появлялись друг за другом.

HTML:

<nav id="mainmenu">
    <a href="#">Item1</a>
    <a href="#">Item2</a>
    <a href="#">Item3</a>
<nav>
<nav id="submenu">
    <a href="#">Item1</a>
    <a href="#">Item2</a>
    <a href="#">Item3</a>
<nav>

CSS:

nav{
    display: block;
}

РЕДАКТИРОВАТЬ:

Вот как я хотел бы, чтобы это было настроено, но я бы предпочел плавать элемент a, чтобы у меня не возникало проблемы с интервалом со встроенным блоком.

http://jsfiddle.net/Kpv5H/2/

Я до сих пор не понимаю, почему плавающий тег a заставляет все теги отображаться встроенными, когда элемент nav является блочным?

http://jsfiddle.net/Kpv5H/4/

Если я отключу тег a, они выровняются правильно, но я потеряю отступы сверху и снизу тега a. Если я добавлю display:block, чтобы исправить, что все теги складываются друг над другом. Если попытаться исправить это с помощью float:left, отображение будет встроенным.

Встроенный блок в теге a, кажется, исправляет это, но вместо этого я получаю проблему с интервалом.

Есть ли способ сложить элементы навигации и разместить элементы a, сохранив при этом отступы к элементу a?


css nav
person Molotch    schedule 02.08.2012    source источник
comment
@Molotch: см. мой ответ ниже   -  person Ahsan Khurshid    schedule 02.08.2012
comment
@Molotch: обновил мой ответ возможным решением.   -  person Ahsan Khurshid    schedule 02.08.2012

Ответы (2)


arrow_upward
0
arrow_downward

ОТРЕДАКТИРОВАНО: *(после добавления более подробной информации OP)*

С ИСПОЛЬЗОВАНИЕМ INLINE-BLOCK ТЕХНИКИ:

Используя inline-block, если вы установите font-size:0px; в nav (основной контейнер, содержащий inline-block элементов), вы не получите дополнительный интервал, вызванный inline-block

ПОСМОТРЕТЬ ДЕМО

Без добавления font-size:0px; в nav это будет выглядеть так:

ПОСМОТРЕТЬ ДЕМО

С ИСПОЛЬЗОВАНИЕМ FLOAT ТЕХНИКИ:

вам нужно добавить overflow:hidden и width, чтобы ваш элемент nav не был плавающим.

См. изменения в вашем CSS ниже:

nav {
    display: block;
    overflow:hidden; /* Added */
    width: 100%; /* Added */
}

nav a {
    float: left;
    padding: 2em;
}​

ПОСМОТРЕТЬ ДЕМО

person Ahsan Khurshid    schedule 02.08.2012
comment
Вот как я хотел бы, чтобы это было настроено, но я бы предпочел плавать элемент a, чтобы у меня не возникало проблемы с интервалом со встроенным блоком jsfiddle.net/Kpv5H/2 Я до сих пор не понимаю, почему при плавании тега a все теги a отображаются встроенными, когда элемент nav является блочным? jsfiddle.net/Kpv5H/4 Если я удаляю тег a, они выравниваются правильно, но я теряю заполнение сверху и снизу тега a. Если я затем добавлю display:block к тегу a, все теги будут складываться друг над другом. Если я добавлю поплавок, он появится в строке. =) Встроенный блок в теге a, кажется, исправляет это, но вместо этого я получаю проблему с интервалом. - person Molotch; 02.08.2012
comment
Спасибо, я заметил, что не закрыл теги навигации. Если я делаю, что свойство ширины не требуется, все равно нужно использовать overflow: hidden. - person Molotch; 02.08.2012

arrow_upward
0
arrow_downward

Вот что я сделал для этого

nav a{
    display: block;
}
person user12494378    schedule 07.12.2019
comment
Вы уверены, что этот ответ правильный? Похоже, что OP хочет сложить элементы nav, но встроить элементы a, но ваш ответ складывает элементы a. Также существует тот факт, что это действительно старый вопрос с принятым ответом, который в наши дни можно было бы решить лучше, например, с помощью Flexbox. - person Raul Sauco; 07.12.2019