发布
社区首页 >问答首页 >每一项之间的菜单行

每一项之间的菜单行
EN

Stack Overflow用户
提问于 2012-09-14 20:40:52
回答 2查看 3.2K关注 0票数 1

这是我的布局菜单:

http://gyazo.com/da1f1954a34694facaaab8ce6c92b267

您能看到每个菜单项之间的黑白低不透明度线条吗?我怎么才能把它们做成那样的尺寸呢?你还可以看到每个菜单项中都有一个空格量,我该怎么做呢?

谢谢

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-09-14 20:53:34

1)对于边框使用rgba:

代码语言:javascript
代码运行次数:0
复制
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% */
}

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

代码语言:javascript
代码运行次数:0
复制
your_li_element_selector:first-child {
    border-left: 0;
}

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

代码语言:javascript
代码运行次数:0
复制
your_li_element_selector:last-child {
    border-right: 0;
}

2)对于空间,使用li元素的marginpadding属性以及其中的a

票数 3
EN

Stack Overflow用户

发布于 2012-09-14 21:14:06

您可以使用RGBA设置左边框和右边框,并向下更改不透明度。第一个孩子和最后一个孩子删除额外的边框。缺点是上面的东西在一些较老的浏览器中不能工作。正如@dev所说,最适合的可能是使用图片。

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12424767

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档