Question

我有一个深色背景的菜单div。在它内部，我有几个菜单项div，右边和左边有1px边距。这样我就有了它们之间的分隔符。显然这些出现在我不想要的菜单的左侧和右侧。有没有办法在不插入1像素div作为分隔符的情况下实现这一目标？

谢谢

编辑：对不起，我认为它足够描述。这是代码：

<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不兼容是可以的（谢天谢地）。

Answer 1

以下规则适用于跟随另一个.menu_item元素的所有.menu_item元素：

.menu_item + .menu_item {
  border-left: 2px solid black;
}

Answer 2

实现它的最简单方法是使用自定义类标记第一个和最后一个元素，并从中删除边距。

<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。

或者，您可以在右侧使用2px页边距，而只使用一个附加类：

<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>

Answer 3

如果您的受众群体中有很大一部分浏览器支持CSS3，则可以使用:first-child and :last-child pseudo-classes：

div#menu div:first-child {
margin-left: none;
}
div#menu div:last-child {
margin-right: none;
}

Answer 4

你不能每边都有2px的左边距而不是1px，然后使用css伪类:first-child删除第一项的这些边距吗？

编辑：我同意你应该使用border作为分隔符而不是背景这一事实，但如果你出于某些原因这样做，我的答案仍然有效： - ）

CSS：删除最后一项和第一项的分隔符

4 个答案: