ul跨页面

Question

我正在使用此处描述的技术构建顶部导航http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

我的目标是导航的背景颜色在整个页面上延伸，而实际的导航链接（ul）则居中。

        <nav>
            <ul>
                <li>
                    <a href="#">Mira Ishii</a></h1>
                </li>
                <li>
                    <a href="#">Portfolios</a></h2>
                <li>
                    <a href="#">Resume</a></h2>
                </li>
                <li>
                    <a href="#">Contact</a></h2>
                </li>
            </ul>
        </nav>

相关CSS

    nav {
margin: 0 auto;
text-align: center;
background-color: #396b95;
    }
    nav ul{
position: relative;
list-style: none;
display: inline-table;
    }
/*this clearfix does nothing*/
nav ul:after{
    content: "";
    clear: both;
    display: block;
}
nav ul li {
    float: left;
}
    nav ul li:hover{
        background-color: #254662;
    }
        nav ul li:hover a {
            color: #efefef;
        }
    nav ul li a {
        display: block;
        color: #222;
        padding: 1em;
    }

当我将background-color: #396b95;放在导航栏中时，它会延伸到整个页面，但ul和nav的高度之间有一个小的（4像素）间隙。我可以将background-color: #396b95;放在ul上，但它不会延伸到整个页面。

我的直觉告诉我，我没有正确地进行明确修复，尽管可能还有另一种解决方案

Answer 1

要消除ul和nav之间的任何差距，请清除边距/填充：

nav ul { margin: 0; padding: 0 }

Fiddle