Блог

Что ж, сегодня я действительно в тупике, я пытаюсь воссоздать эту навигационную панель:

http://www.autotrader.co.uk/

Теперь, если вы посмотрите на нее, у нее есть границы слева и границы справа для ссылки «Покупка». Покопавшись в CSS, я понял, как они сделали это возможным. У них есть этот HTML:

 <ul class="navmain_holder">
</ul>
  

Разработчики добавили к этому элементу левую границу, чтобы создать границу в начале навигационной панели.

Теперь, если вы посмотрите на этот живой пример заголовка моего сайта:

http://www.dealerbyte.co.uk/

Граница установлена слева, однако, если вы посмотрите на ссылку «Получить финансы», я не могу добавить к ней правую границу, потому что тогда все остальные элементы получат эту границу, из-за чего некоторые границы будут выглядеть толщиной в 2 пикселя вместо одного, и поскольку я использую Bootstrap, адаптивный CSS мешает мне каким-либо образом подойти к этой проблеме.

Извините, я не очень хорошо объяснил свою проблему, надеюсь, кто-нибудь поймет, любая помощь будет высоко оценена 🙂

Вы можете выбрать последний элемент с помощью следующего селектора:

 ul.nav > li:last-child {
  border-right: 1px solid #475d88;
}
  

Выбирается только последний li элемент. Удачи!

РЕДАКТИРОВАТЬ вот демонстрационная скрипка от Гарри: http://jsfiddle.net/hari_shanx/D2JzN

РЕДАКТИРОВАТЬ как указал Пит, вы также можете добавить border-left только к внешнему ul элементу и применить border-right ко всем li элементам. Также стоит отметить, что, если вы хотите поддерживать IE8, last-child селектор, я полагаю, не поддерживается. Возможно, вам придется пойти этим путем, но из моего тестирования похоже, что вы не пытаетесь поддерживать IE8, что, вероятно, лучше для вашего здравомыслия. 🙂