css - 容器内的元素不显示

Question

我使用 'section' 元素作为 'header' 元素中的容器。

容器没有以任何方式显示。

直播：http ://blnr.org/testing

HTML

    <!-- start pagewrap -->
    <div id="pagewrap">

        <!-- start header -->
        <header>

            <section id="container">    

            </section>

        </header>
        <!-- end header -->

    </div>
    <!-- end pagewrap -->   

CSS

header {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 65px;
    background-color: #F9F9F9;
    border-bottom: thin solid #C6D9F1;
    margin: 10px 0 10px 0;
}

header section #container {
    width: 900px;
    height: 30px;
    border: thin dotted black;
    margin: 0 auto;
}

Answer 1

你有一个小错误：

更改：header section #container在header section#container您的 CSS 中为：

header section#container {
    width: 900px;
    height: 30px;
    border: thin dotted black;
    margin: 0 auto;
}

id="container" 您所做的基本上是在该部分内寻找元素宽度。

Answer 2

section和之间的空格表示它是节块内#container具有 id 'container' 的元素的选择器。删除空格：

header section#container {
    width: 900px;
    height: 30px;
    border: thin dotted black;
    margin: 0 auto;
}