Роздільники навігації

Мені потрібно додати роздільники між елементами навігації. Роздільники - зображення.

Моя HTML структура як: ol > li > a > img.

Тут я приходжу до двох можливих рішень:

1. Щоб додати більше liтегів для розділення (boo!),
2. Включіть роздільник у зображення кожного елемента (це краще, але це дає можливість користувачеві натиснути на, наприклад, "Домашня сторінка", але потрапити до "Послуги", оскільки вони знаходяться один за одним, і користувач може випадково натиснути на роздільник, який належить до "Послуги");

Що робити?

Просто використовуйте зображення розділювача як фонове зображення на li.

Щоб воно відображалося лише між елементами списку, розташуйте зображення ліворуч li, а не на першому.

Наприклад:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

Цей CSS додає зображення до кожного елемента списку, який слідує за іншим елементом списку - іншими словами, крім першого.

NB. Будьте в курсі, що сусідній селектор (li + li) не працює в IE6, тому вам доведеться просто додати фонове зображення до звичайного li (із умовною таблицею стилів) і, можливо, застосувати негативне поле до одного з ребер.

Якщо немає необхідності використовувати зображення для роздільників, ви можете зробити це за допомогою чистого CSS.

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

Це ставить смугу між кожним елементом списку, як і зображення, описане в оригінальному запитанні. Але оскільки ми використовуємо сусідні селектори , він не ставить смужку перед першим елементом. А оскільки ми використовуємо :beforeселектор псевдо, він не ставить його в кінці.

Ви можете додати один liелемент, куди потрібно додати роздільник

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

У CSS можна додати наступний код.

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

Це збільшить швидкість виконання, оскільки воно не завантажить жодне зображення. просто протестуй .. :)

Інше рішення в порядку, але немає потреби додавати роздільник в останню чергу, якщо використовується : після або на самому початку, якщо використовується : раніше .

ТАК:

випадок: після

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

випадок: раніше

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

Щоб роздільник був розташований вертикально по центру відносно тексту меню,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }

Додайте роздільник на liзадній план і переконайтеся, що посилання не розширюється, щоб охопити роздільник, а це означає, що роздільник не зможе натискати.

Для тих, хто використовує Sass , я написав для цього міксин :

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

Приклад:

@include addSeparator('li', '|', 1em);

Що дасть вам це:

li+li:before {
  content: "|";
  padding: 0 1em;
}

Я вважаю, що найкращим рішенням для цього є те, що я використовую, і це природний кордон css:

border-right:1px solid;

Можливо, вам доведеться подбати про підкладці, як:

padding-left: 5px;
padding-right: 5px;

Нарешті, якщо ви не хочете, щоб у останнього лі була така межа, яка відокремлюється, вкажіть "останнє дочірнє" "жодне" у "правій межі", як це:

li:last-child{
  border-right:none;
}

Удачі :)

Помістіть його як фон для елемента списку:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

Далі я рекомендую іншу розмітку для доступності:
Замість того, щоб вставляти зображення в рядки, вводити текст у вигляді тексту, оточувати кожен з прольотом, застосовувати зображення як фон фоном, а потім приховати текст із відображенням: немає - це надає набагато більше гнучкості в стилі та дозволяє використовувати плитку із зображенням широкого формату bg розміром 1 пікселя, економить пропускну здатність, і ви можете вбудовувати його в спрайт CSS, який зберігає дзвінки HTTP:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

ОНОВЛЕННЯ ОК, я бачу, що інші отримали подібну відповідь перед собою - і зауважу, що Джон також включає в себе засіб, щоб запобігти появі розділювача перед першим елементом, використовуючи перемикач li + li - що означає, що будь-який li приходить після іншого лі.