html - 底部边框不覆盖顶部边框

Question

我正在为屏幕构建一系列选项卡，左侧的 div 在顶部边框方面与右侧的 div 的行为不同。

我在两个并排放置的 div 顶部有一个无序列表 (ul)，它们充当两列。为了帮助演示，我有两个 div 的顶部边框，让用户觉得这是内容。为了进一步帮助演示，我将活动选项卡的底部边框设置为白色，因此选项卡下方似乎没有边框，并且选项卡和内容区域是相同的空间。我遇到的问题是选项卡的底部边框覆盖右列但不是左侧，但在右侧顶部覆盖底部。

http://jsfiddle.net/z39zV/

您将不得不调整屏幕大小以使屏幕显示问题，因为其中一项要求是具有扩展的右列。

我在 IE、Chrome 和 FF 中试过这个，它们都显示相同的东西。左列有一个浮动，所以它可能与此有关，但我不知道是什么！

Answer 1

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

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

我还建议将边框从 a 元素移动到它们的父 li 元素，并将两个较低的 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;
    }