выравнивать элементы CSS относительно базового элемента

Question

Это мой HTML:

<nav id="menu">
   <ul>
      <li><a href="">Produkte</a></li>
      <li><a href="">Angebote</a></li>
      <li><a href="">Referenzen</a></li>
      <li><a href="">Anfahrt</a></li>
      <li><a href="">&Uuml;ber uns</a></li>
      <li><a href="">Jobs</a></li>
      <li><a href="">Partner</a></li>
      <li><a href="">Kontakt</a></li>
   </ul>
</nav>

А это мой CSS:

#menu {
    position:relative;
    width:100%;
    height:35px;
    margin-bottom:10px;
    background-image: url("../img/menuBackground.png");
    background-repeat: no-repeat;
}
#menu ul {
    display: block;
    list-style-type: none;
    position: relative;
    top:5px;
    margin-left:20px;
    margin-right:20px;
}

#menu ul li {
    display: block;
    position: relative;
    float: left;
    margin-right: 16px;
}

Как вы могли заметить, в "menuBackground.png" есть белая полоса. (Таким образом, белая полоса является частью изображения «menuBackground.png».) Проблема в том, что меню генерируется автоматически CMS. И текст в элементах A никогда не должен перекрывать нижележащую белую полосу , как это происходит с элементом Kontakt.

Как я могу гарантировать, что будет некоторое дополнительное расстояние, когда элемент перекрывает белую полосу?

Заранее спасибо за любой ответ по этому вопросу

ЗДЕСЬ ПРИМЕР JS FIDDLE ...

Answer 1

Следующие работы:

#menu {
    position:relative;
    width:100%;
    margin-bottom:10px;
    background-repeat: no-repeat;
    overflow: hidden;
}
#menu ul {
    display: block;
    list-style-type: none;
    position: relative;
    top:5px;
    margin-left:20px;
    margin-right:20px;
    background-color: #ff9025;
    overflow: hidden;
}

#menu ul li {
    display: block;
    position: relative;
    float: left;
    padding: 0 8px;
    height: 35px;
    background-color: #ffbf00;
}

#menu ul li:last-child {
    background-image: url(http://i.stack.imgur.com/WSJSV.png);
    background-position: 63% top;
    background-repeat: no-repeat;
    padding-right: 60px;
}

Хотя это немного клудж.

JS Fiddle demo .

Effectively I 'мы удалили background-image из ul (или nav, я не уверен, сейчас) и добавили его в конец li:last-child ¹ , расположив его так, чтобыполоса видна.Это включало добавление достаточного отступа к этому элементу и стилизацию ul с background-color на правой стороне изображения и li элементов с левым цветом для симуляции изображения.Это не идеально, но я думаю, что это работает надежно.Конечно, я бы предложил добавить и закомментировать дополнительные элементы li, чтобы протестировать его.

Отредактировано после того, как я обнаружил, что в IE почти отсутствует поддержка :last-child,использовать jQuery (как вы говорите, ваш сайт уже использует его в ваших комментариях):

$('#menu li:last').addClass('lastChild');

JS Fiddle demo .

Отредактировано до того, что, как я думаю, должно быть окончательной версией, с функцией обнаружения функций для включения опции jQuery при отсутствии поддержки :last-child (хотя я не могупока что явно проверьте, что :last-child сам не существует, но я подозреваю, что браузер, который не поддерживает document.querySelectorAll() , вероятно не поддерживает :last-childчто, на самом деле, ужасное предположение):

if (!document.querySelectorAll){
    $('#menu li:last').addClass('lastChild');
}

JS Fiddle demo .

1. Это проблема для более старых браузеров, особенно для IE vintage, поскольку, насколько я помню, ранее версии 7 имели проблемы с псевдоселектором :last-child.При просмотре таблиц совместимости на Quirksmode.org он выглядит даже хуже, чем я думал: ни одна версия ниже IE9 не поддерживает селектор :last-child.

Answer 2

Невозможно добавить пространство на основе фонового изображения, вы несете ответственность за то, чтобы оно соответствовало вашим желаниям (делайте математику), вы можете создать div, который разделяет вашу навигационную панель, но для этого вы должны сократить ваше фоновое изображение тоже, 1 для навигационной части и другое для белой полосы, или просто более низкие поля и размер шрифта