css - 可以用 css 做到这一点吗？显示的图像

Question

所以我的导航栏列表上有一个右边框，看起来像 this

不过我希望它看起来像this这可能不使用图像吗？

谢谢。

导航栏 CSS

.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav li {
    display: table-cell;
    width: 11.1%;
    float: none;
    text-align: center;
    left: 4px;
    font-weight: bold;
    height: 15px;
}

.navbar .nav li a {
    border-right: 1px solid black;
    height: 10px;
    line-height: 10px;
}

#active-link {
    text-decoration: underline;
}

.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

Answer 1

尝试将 border-right 设置为 <a>元素而不是 <li>元素。

编辑 1

因为你的 border-right 附加到你的 a 元素试试这个:

.nav li { 高度:15px； }.nav li a { height: 10px; }

您现在可能会看到边框小于菜单按钮本身。只需稍微调整一下高度，看看您想要什么。

编辑2

同时添加:

.nav li a { line-height: 15px; }

行高必须与列表项的高度相同。