在div上显示li？边界问题

Question

所以我正在尝试构建我在photoshop中制作的东西。

我正试图获取边框的<li>，以便隐藏右边的边框。 （这有意义吗？）

这是一个小提琴：http://jsfiddle.net/5dksT/ 请注意，当您将鼠标悬停在<li> /链接上时，会显示右边框。

我如何解决这个问题，以便每个李都能在上面隐藏边界？或者你还有其他解决方案吗？

由于

Answer 1

给右边距-1px，将右边框颜色更改为白色。

.panel_nav li {
    margin:15px -1px 0 20px;
}
.panel_nav li:hover{
    border-right-color: #fff;
}

http://jsfiddle.net/5dksT/5/

Answer 2

我已添加到您的li ...

position: relative; 
right: -1px

^{（或者您可以将保证金更改为15px -1px 0 20px以将其1px拉到右侧。）}

...以及li:hover ...

border-right: none;

......它有效！

jsFiddle

Answer 3

仅在Chrome 12上对此进行了测试，因为我现在不在我的开发机器上：

改变这个：

.panel_nav li{list-style:none;padding:10px;margin:15px 0 0 20px;}

为：

.panel_nav li{list-style:none;padding:10px;margin:15px -1px 0 20px;}

并在li：hover结束时（在“border：”语句之后，否则它将默认为#ccc）：

border-right: 1px solid #fff;

http://jsfiddle.net/waitinforatrain/5dksT/4/

将右边距设为负1px