Навигационная панель, видимые пространства между элементами списка

У меня есть традиционный навигатор. между каждым ли я кладу один div с шириной 1px и чуть меньшей высотой, чем nav bar.Навигационная панель, видимые пространства между элементами списка

В основном я собирался для этого взгляда:

http://subalee.com/nav.jpg

HTML:

<nav> 
    <ul> 
    <div></div> 
    <li><a href="#">Domov</a></li> 
    <div></div> 
    <li><a href="#">Služby</a></li> 
    <div></div> 
    <li><a href="#">O nás</a></li> 
    <div></div> 
    <li><a href="#">Kontakt</a></li> 
    <div></div> 
    </ul> 
</nav>

CSS:

nav ul div { 
    height:31px; 
    width:1px; 
    background-color:#34b9ff; 
    display:inline-block; 
} 

nav ul li { 
    display:inline; 
} 

nav ul li a { 
    display:inline-block; 
    padding:10px;

При изменении DIV для отображения: встроенный; текст работает правильно, но эти видимые пространства каким-то образом исчезают.

источник

2013-04-10 IamLee

возможно дубликат [Где пространство вокруг Img элементов происходят?] (Http://stackoverflow.com/questions/15380670/where-does-the-space-around-img-elements-originate) –

Из принятого ответа в дубликате, отмеченном выше, это связано с пробелом в вашем html между элементами 'inline' и' inline-block'. Также обратите внимание, что ваш HTML недопустим, так как вам не нужно, чтобы элементы 'div' непосредственно вставляли элемент' ul' –

Задача 1: Вам не разрешено помещать никого в ul, кроме li. я бы рассмотреть другой подход, чтобы пропустить синтаксический бесполезный стайлинг-див:

JS-Fiddle Example

nav ul li { 
    font-size: 16px; 
    display:inline; 
    padding: 2px 0px; 
    border-right: 1px solid blue; 
}

Вы можете избежать пробелов между строчными элементами, установив font-size на 0 и сбросить его на li.

источник

2013-04-10 13:28:23 nirazul

Да, это был мой второй вариант, однако эти границы в вашем примере будут той же высоты, что и li elemnt, и я хотел, чтобы они немного дольше, но в любом случае я думаю, что я буду использовать ваш пример, спасибо :) – IamLee

О, это легко сделать! Просто добавьте дополнение к элементу списка. Смотрите мой обновленный Fiddle. Когда на ваш вопрос будет дан ответ, вы должны принять ответ, который вам больше всего помог. В противном случае все меньше и меньше людей постараются вам помочь :) – nirazul

Спасибо, что-то новое для сайта stackexchange :) – IamLee

Я не думаю, что вы можете иметь DIV в пределах UL. Я уверен, что вы могли бы достичь тех же результатов только с помощью LI, добавив соответствующий стиль.

источник

2013-04-10 13:28:20 AndreCruz

Наличие 'div' в' ul' не соответствует HTML5, в котором указано, что UL должен содержать 0 или больше элементов списка. http://www.w3.org/TR/html5/grouping-content.html # the-ul-element – Exelian

, если вы не хотите каких-либо изменений в том, как элементы объявлены в вашем HTML, то использовать

border-left:1px solid #34b9ff;

вместо background-color: и использовать display:inline;

Полный CSS будет выглядеть

nav ul div { 
    height:31px; 
    width:1px; 
    border-left:1px solid #34b9ff; 
    display:inline; 
}

Here's the fiddle

источник

2013-04-10 13:28:30 GeekyCoder

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

После того, как jsFiddle покажет именно ваш код с удаленным пространством, результаты в том, что я думаю, это то, что вы хотите.

http://jsfiddle.net/jPF2p/

источник

2013-04-10 13:33:14 Exelian

Ну, это именно та проблема, с которой я столкнулся: li лишился:/В любом случае я не знал, что я не могу что-то между ли, поэтому спасибо за указание на это :) – IamLee

Навигационная панель, видимые пространства между элементами списка

ответ

Смежные вопросы