css - Td 水平重叠

Question

我有一个包含 7 个菜单项的水平菜单。菜单是一张表，一行，有 7 个单元格。

单元格的右边界是浅色。单元格的左边框是深色。

我现在想要的是单元格一的右边界在单元格二的左边界的右侧。然后（单元格 2 的）深色边框将在左侧，而（单元格 1 的）浅色边框将在右侧。

问题： margin-left:-2%;不起作用！而且margin-right:-2%;也不是！而且不是left，right像素不是！我怎样才能让单元格重叠，为什么这些东西不起作用

Answer 1

The cells cannot overlap for sure. But you can change your ordering a bit:

your odd cells can have light borders and your even cells can have dark borders such that the effect remains same.

Hope that helps.

Answer 2

我不认为表格单元格可以重叠。更好的解决方案是使用列表而不是表格（无论如何您都应该这样做）。然后你可以设置 li 元素的样式。

例如

HTML

<ul>
  <li>First menu item</li>
  <li>Second menu item</li>
  <li>Third menu item</li>
</ul>

CSS

li { 
  border-left: 1px solid #333;
  border-right: 1px solid #CCC; }

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