代码之家 › 专栏 › 技术社区 › Ben Beri

每个项目之间的菜单行

space menu css

1

Ben Beri · 技术社区 · 14 年前

这是我的布局菜单:

http://gyazo.com/da1f1954a34694facaaab8ce6c92b267

你能看到每个菜单项之间的黑色和白色低透明度线吗? 我怎样才能把它们做成那样大?你还可以看到每个菜单项都有一定的空间,我该怎么做?

谢谢

2 回复 | 直到 14 年前

1

3

Yakovenko Max 14 年前

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 的属性 li 元素和 a 在里面。

2

0

DBUK 14 年前

可以使用RGBA执行左边框和右边框操作,并降低不透明度。删除额外边框的第一个子项和最后一个子项。不利的一面是,以上这些东西在一些旧的Brower中不起作用。正如@dev所说,最适合的可能是使用图像。

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