CSS: удалить разделитель на последнем и первом элементе - PullRequest
4 голосов
/ 01 сентября 2009

У меня есть раздел меню с темным фоном. Внутри у меня есть несколько элементов меню с полями в 1 пиксель справа и слева. Таким образом, у меня есть разделители между ними. Очевидно, они появляются в самой левой и очень правой части меню, которое я не хочу. Есть ли способ сделать это, не вставляя 1-пиксельные делители в качестве разделителей?

Спасибо

edit: извините, я подумал, что это достаточно наглядно. Вот код:

<div id="menu">
       <a href="#"><div class="menu_item"><img src="imgs/menu/szabalyzat.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/profil.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/zenekarok.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/jelentkezes.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/esemenynaptar.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/mmmk_estek.png" /></div></a>
 </div>

IE6 несовместимость в порядке (к счастью).

Ответы [ 4 ]

13 голосов
/ 01 сентября 2009

Следующее правило будет применяться ко всем элементам .menu_item, следующим за другим элементом .menu_item:

.menu_item + .menu_item {
  border-left: 2px solid black;
}
3 голосов
/ 01 сентября 2009

Самый простой способ добиться этого - пометить свои первый и последний элементы пользовательскими классами и удалить из них эти поля.

<ul class="menu">
  <li class="first">One</li>
  <li>Two</li>
  <li>Three</li>
  <li class="last">Four</li>
</ul>
<style>
  .menu li { margin: 0 1px; }
  .menu .first { margin-left: 0; }
  .menu .last { margin-right: 0; }
</style>

Вы также можете попробовать использовать сложные селекторы CSS, такие как :first-child, но они не работают в более старых версиях MSIE.

ИЛИ, вместо этого вы можете использовать поля в 2 пикселя справа и использовать только один дополнительный класс:

<ul class="menu">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li class="last">Four</li>
</ul>
<style>
  .menu li { margin-right: 2px; }
  .menu .last { margin-right: 0; }
</style>
2 голосов
/ 01 сентября 2009

Если высокий процент браузеров вашей аудитории поддерживает CSS3, вы можете использовать псевдоклассы :first-child и :last-child :

div#menu div:first-child {
margin-left: none;
}
div#menu div:last-child {
margin-right: none;
}
1 голос
/ 01 сентября 2009

Разве у вас не может быть 2px левого поля вместо 1px на каждой стороне, а затем использовать псевдокласс css :first-child, чтобы удалить эти поля для первого элемента?

РЕДАКТИРОВАТЬ: Я согласен с тем фактом, что вы должны использовать границу в качестве разделителя, а не фона, но в случае, если вы делаете это таким образом по каким-либо веским причинам, мой ответ остается в силе: -)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...