css - 每个项目之间的菜单行

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的属性。lia

Answer 2

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

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