HTML / CSS页面宽度意外结果

Question

我有以下内容： jsfiddle.net/ed47D /

<nav>
    <div class="navWrapper">
        <div class="navLeft">
            <table>
                <tr>
                    <td class="navOption" id="navHome">Home</td>
                    <td class="navOption" id="navProducts">Products</td>
                </tr>
            </table>
        </div>
        <div class="navCenter">
            <h1>Title</h1>
        </div>
        <div class="navRight">
            <table>
                <tr>
                    <td class="navOption" id="navServices">Services</td>
                    <td class="navOption" id="navContact">Contact Us</td>
                </tr>
            </table>
        </div>
    </div>
</nav>


body{
    padding:0;
    margin:0;
    width:100%;
}
nav{
    width:100%;
    height:50px;
    position:absolute;
    background-color:black;
}
.navWrapper{
    position:relative;
    width:900px;
    margin-left:auto;
    margin-right:auto;
}
.navLeft{
    text-align:center;
    display:inline;
    float:left;
    width:300px;
}
.navLeft table{
    width:100%;
}
.navLeft table td{
    width:50%;
}
.navCenter{
    text-align:center;
    display:inline;
    float:left;
    width:300px;;
}
.navRight{
    text-align:center;
    display:inline;
    float:left;
    width:300px;
    margin-top:20px;
}
.navRight table{
    width:100%;
}
.navRight table td{
    width:50%;
}

我需要导航栏本身跨越100％，但是一个较小的元素（navWrapper）跨越900px并居中，但是当页面创建并滚动时，导航栏不会超过100％。

Answer 1

这样改变你的CSS：

Demo Fiddle

nav {
    width:100%;
    height:50px;
    position:absolute;
    text-align:center; /* centre child content */
    background-color:black;
}
.navWrapper {
    position:relative;
    width:900px;
    margin: 0 auto; /* concatenated margin setting */
    overflow:hidden; /* contain child floats to give element height */
}