每个项目之间的菜单行

Question

这是我的布局菜单：

http://gyazo.com/da1f1954a34694facaaab8ce6c92b267

你能看到每个菜单项之间的黑白低不透明度线吗？我如何使它们完全符合这个尺寸？您还可以看到每个菜单项中都有空间量的空间，我该怎么做？

谢谢

Answer 1

1） 对于边框，请使用 rgba：

your_li_element_selector {
    border-right: 1px solid rgba(255, 255, 255, 0.5); /* white border with opacity 50% */
    border-left: 1px solid rgba(0, 0, 0, 0.5); /* black border with opacity 50% */
}

隐藏第一个菜单项的左边框：

your_li_element_selector:first-child {
    border-left: 0;
}

隐藏最后一个菜单项的右边框：

your_li_element_selector:last-child {
    border-right: 0;
}

2）用于空间利用margin和padding元素及其内部a li属性。

Answer 2

您可以使用 RGBA 进行左边框和右边框，并向下更改不透明度。第一个子项和最后一个子项删除额外的边框。缺点是上述内容在某些较老的浏览器中不起作用。正如@dev所说，最合适的可能是使用图像。

使用 RGBA 的示例，第一个子项和最后一个子项：http://jsfiddle.net/Ra9NT/