如何删除div上的边框部分以使左侧导航看起来与主要内容部分无缝连接？

Question

我正在尝试删除活动菜单项遇到正确内容div的左边框。

请参阅http://d.pr/i/hfRZ+

所以看来活动元素与主要内容div的级别相同，如http://dribbble.com/shots/663779-Left-navigation

如果重要的话我正在使用twitter bootstrap。

任何指针都非常感谢！

编辑：这是指向HTML / CSS的链接

查看： http://codepen.io/anon/full/Asrnm

修改 http://codepen.io/anon/pen/Asrnm

Answer 1

您无法部分删除边框，只能覆盖它们。您需要使所选项目与边框重叠（或者有一个脚本将另一个元素放在边框上）。

Answer 2

我打了一个演示：http://dabblet.com/gist/3762742

使用：以1px宽度和父级的背景色重叠右边框的边框。

Answer 3

您可以让所选项目只有顶部和底部边框

.selected-item
{
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

或

.selected-item
{
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-left: 0px;
    border-right: 0px;
}

并且为了避免从父容器中转出框阴影，您可以用

替换它

.selected-item:after
{
    display: block;
    position: absolute;
    height: 10px;
    background: url("gradient.gif") top left repeat-x;
}

通过这种方式，您可以在元素下方获得一致的水平阴影，该阴影一直到父元素及其边界，但不会超出。

Answer 4

.selected-item {
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-bottom: 0px
}