底部边框不会覆盖顶部边框

Question

我正在为一个屏幕构建一系列标签，左边的div在顶部边框方面的行为与右边的div不同。

我有一个无序列表（ul）位于两个并排放置的div之上，这两个div作为两列。为了帮助演示，我有两个div的顶部边框，给用户一个这就是内容的印象。为了更有助于演示，我将活动标签的下边框设置为白色，这样看起来在标签下面没有边框和＆amp;选项卡和内容区域是相同的空间。我遇到的问题是标签的底部边框覆盖了右边的列而不是左边的列，但是在右边，顶部覆盖了底部。

http://jsfiddle.net/z39zV/

您必须调整屏幕大小才能让屏幕显示问题，因为其中一个要求是扩展右列。

我在IE，Chrome＆amp; FF＆amp;他们都表现出同样的东西。左栏有一个浮动，所以它可能与此有关，但我无法解决问题！

Answer 1

您可以将无序列表的position属性设置为relative，以便将其放置在堆栈中更远的位置。这是小提琴。

http://jsfiddle.net/z39zV/4/

我还建议将边框从一个元素移动到它们的父元素，并将两个下面的div包装在一个具有完整边框的div中。

Answer 2

更新了jsfiddle：

http://jsfiddle.net/z39zV/1/

你没有浮动两列，这是主要问题：

   .column_container_left {
        float: left;
        width: 200px;
        border-top:thin solid grey;                    
        border-bottom:thin solid grey;    
        border-left:thin solid grey;
        background-color: white;
        height: 500px;
    }

    .column_container_right {
        float: left;
        width: 200px;
        border-top:thin solid grey;                    
        border-bottom:thin solid grey;    
        border-right:thin solid grey;
        background-color: white;
        height: 500px;
    }