最后一个孩子边框没有显示

Question

我正在使用选择器first-child和last-child将圆角应用于无序列表。

我遇到的问题是最后一个列表项的右边框没有显示。

我像这样定义边框：

border: 1px solid hotpink;
border-right: 0;

将右侧边框设置为0以防止出现双边界，然后在last-child中，我将border-right的宽度设为1。

但这让我在最后一个孩子身上没有右手边框，我不确定为什么，正如你在下面看到的那样：

这是我的整个CSS和JSFiddle：

ul, li {
    margin: 0;
    padding: 0;
}

.menu {
    width: 90%;
    margin: 0 auto;
    height: 30px;
    list-style: none;
}

.menu li {
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid hotpink;
    border-right: 0;
    padding: 0 0.5em;
}

.menu li:first-child {
    border-top-left-radius: 5px;
}

.menu li:last-child {
    border-top-right-radius: 5px;
    border-right: 1px;
}

http://jsfiddle.net/QFvr6/

Answer 1

您应该使用border-right: 0;而不是border-right-width: 0;，而使用:last-child选择器则需要使用

.menu li:last-child {
    border-top-right-radius: 5px;
    border-right-width: 1px;
}

Demo

问题在于，当您使用border-right: 0;时，它会重置大小，类型和颜色，因此即使您仅使用border-right-width: 1px;，也不会有效，因此您需要也可以border-right-width: 0;使用.menu li。

Answer 2

您的规则不完整：border-right: 稳固 1px;或者border-right-width:1px; 的 DEMO

Answer 3

已修复，您忘了指定border-right无法使用border：

.menu li:last-child {
    border-top-right-radius: 5px;
    border-right: 1px solid #FF69B4;
}