html - 顶部填充不出现

Question

我正在设计 WP 主题。我决定在标题中创建链接，因为它们在图像中。但是，我无法使蓝色渐变填充区域充满黑色背景(我使用那种花哨的渐变只是为了指出问题)。调用 charming .current 类来实现这一点，它基本上是:

.current {background-color: black; color: rgb(242, 245, 238); padding-top: 65px;}

还有图片:

我确实没有使用 CSS-reset，我检查了 overflow 属性来封装列表的 div，但没有任何效果。

HTML代码:

<div id="container" class="">
    <div id="header" class="shadow">
        <div id="logoContainer">
            <span class="helper"></span><img src="img/tdw_logo_serif.png" alt="The Digital Warehouse">
            <div id="links">
                <ul class="helper">
                    <li><span class="helper"></span>HOME</li>
                    <li class="current"><span class="helper"></span>BLOG</li>
                    <li><span class="helper"></span>PORTFOLIO</li>
                    <li><span class="helper"></span>CONTACT</li>
                </ul>
            </div>
        </div>
    </div>
...
</div>

CSS 代码:

#container {
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 35px;
    overflow: visible;
    background-color: rgb(242, 245, 238);
    color: rgba(5, 0, 18, 1.00);
    z-index: 100;
}   .willStick {
    position: absolute;
    padding-top: 65px;
}   .didStick {
    position: fixed;
    padding-top: 0;
}
#logoContainer {
    position: relative;
    height: 35px;
    padding-left: 60px;
    padding-right: 60px;
    width: 900px;
    margin: auto;
    overflow: visible;
}
#logoContainer img {
    margin: 0;
    padding: 0;
    height: 35px;
    vertical-align: middle;
    display: inline-block;
}
    .helper {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
#links {
    position: relative;
    float:right;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    height: 35px;
    overflow: visible;
}
    #links ul {
        margin: 0;
        padding: 0;
        display: inline-block;
        font-size: 0.7em;
        font-weight: 800;
        font-family: "jaf-bernino-sans-condensed", "proxima-nova", sans-serif;
        text-transform: uppercase;
        list-style-type: none;
        overflow: visible;
    }
    #links li {
        width: 90px;
        height: 35px;
        border: 0;
        margin: 0;
        padding: 0;
        display: inline-block;
        float: left;
        text-align: center;
        overflow: visible;
    }

我们将不胜感激。

Answer 1

这似乎是一个特异性问题 - 尝试

 #links li.current etc.

#container {
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 35px;
    overflow: visible;
    background-color: rgb(242, 245, 238);
    color: rgba(5, 0, 18, 1.00);
    z-index: 100;
}   .willStick {
    position: absolute;
    padding-top: 65px;
}   .didStick {
    position: fixed;
    padding-top: 0;
}
#logoContainer {
    position: relative;
    height: 35px;
    padding-left: 60px;
    padding-right: 60px;
    width: 900px;
    margin: auto;
    overflow: visible;
}
#logoContainer img {
    margin: 0;
    padding: 0;
    height: 35px;
    vertical-align: middle;
    display: inline-block;
}
    .helper {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
#links {
    position: relative;
    /*float:right;*/
    display: inline-block;
    vertical-align: bottom;
    margin: 0;
    padding: 0;
    height: 35px;
    overflow: visible;
}
    #links ul {
        margin: 0;
        padding: 0;
        display: inline-block;
        font-size: 0.7em;
        font-weight: 800;
        font-family: "jaf-bernino-sans-condensed", "proxima-nova", sans-serif;
        text-transform: uppercase;
        list-style-type: none;
        overflow: visible;
    }
    #links li {
        width: 90px;
        height: 35px;
        border: 0;
        margin: 0;
        padding: 0;
        display: inline-block;
        float: left;
        text-align: center;
        overflow: visible;
    }

#links li.current {background-color: black; color: rgb(242, 245, 238); padding-top: 65px;}

<div id="container" class="">
    <div id="header" class="shadow">
        <div id="logoContainer">
            <span class="helper"></span>
            <div id="links">
                <ul class="helper">
                    <li><span class="helper"></span>HOME</li>
                    <li class="current"><span class="helper"></span>BLOG</li>
                    <li><span class="helper"></span>PORTFOLIO</li>
                    <li><span class="helper"></span>CONTACT</li>
                </ul>
            </div>
        </div>
    </div>

</div>