html - 链接之间的导航栏分隔符

标签 html css

<分区>


关闭 8 年前

所以我试图让我的导航栏列表项在每一侧都有一个边框,但我希望它们仍然像这样连接: http://prntscr.com/4wa4q4

当我尝试向两侧添加边框时,它们被隔开并且没有边距,每个列表项上的 2 个边框在一起。怎么才能像图片那样呢?

最佳答案

http://jsfiddle.net/9Leecphh/

HTML:

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

CSS:

ul{
    list-style: none;
}
ul li:first-child{
    border-left: 1px solid gray;
}
ul li{
    border-right: 1px solid gray;
    display: table-cell;
    padding: 5px 20px;
    color: #FFF;
    background: #000;
    margin: 0;
}

关于html - 链接之间的导航栏分隔符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26372797/

上一篇:css - ExpressJS 的 Assets

下一篇:html - DIV 神秘地被放置在其他 DIV 的后面?

相关文章:

javascript - Web iPad 应用程序 - 如何区分单指和两指滚动

html - 内容中带有边框的奇怪行为

javascript - 如何在点击菜单项时隐藏移动菜单?

CSS div 不可见

html - 覆盖响应式电子邮件模板的内联代码

javascript - 如何使用javascript打开onload

php - mkdir() php 函数问题

javascript - 使用 CSS 和 Javascript 实现辐射圈效果

javascript - 可靠地跳转到动态生成的页面上的命名 anchor ?

css - splinter 的动画