Question

我在页面顶部有一组简单的链接，下面有黑色边框。活动链接应在下方显示白色边框。此边框应直接位于黑色边框上。

我无法在此阶段更改HTML，只能更改样式。

这是一个小提琴 - http://jsfiddle.net/grimmus/8E4D5/

<div class="c-landing-pg-tabs-container">
    <div class="c-landing-pg-tabs paymentsLeft">
        <div><a href="#self" class="active-tab">Payments</a></div>
        <div><a href="#self">Inquiries</a></div>
        <div><a href="#self">Trade</a></div>
    </div>
</div>

我很难将它定位在黑色边框上。我可以将显示更改为内联块，增加A元素的高度，但它始终位于下方。试图改变位置：相对并轻推一下。似乎某种z-index可能有效，但不确定它是否可行，因为所有元素都包含在同一个父元素中。

感谢您的任何提示。

Answer 1

删除溢出：隐藏自.c-landing-pg-tabs-container并添加padding-bottom：12px;到.c-landing-pg-tabs a.active-tab。新规则将如下所示：

.c-landing-pg-tabs-container {
    position: relative;
    height: 41px;
    width: 100%;
    min-width: 240px;
    border-bottom: 2px solid #282828;
    margin-bottom: 16px;
}

.c-landing-pg-tabs a.active-tab {
    border-bottom: 2px solid #FFF;
    color: #FFF;
    padding-bottom: 12px;
}

以下是您修改过的小提琴：http://jsfiddle.net/sc5pB/

子元素边框位于父边框

1 个答案: