Question

我只是试图将一个<nav>栏中心放在HTML页面的底部，显然我遗漏了一些东西，因为有很多关于这个问题的回答问题，但它们似乎都不适用于我。我认为我没有做任何与众不同的事情，但它不起作用。我的<nav>栏始终显示在页面的左半部分。

请注意，float:left;下面的nav.footer li会使个别li浮动。如果我的理解是正确的，它不应该使整个组浮动到页面的左侧。

<head>
<title>Fake</title>
<style>
nav.footer
    {
        color:red;
        width:700px;
    }
nav.footer ul
    {
        float:left;
        display: inline-block;
        list-style-type: none;
        color:green;
        font-size:20px;
    }
nav.footer li
    {
        display: inline-block;
        padding: 9px 20px 4px; 
        background-color:#DDDDDD;
        border-left:1px solid #112233;
        border-right:1px solid #112233;
        border-top:2px solid #112233;
        border-bottom:2px solid #112233;
        list-style-type: none;
    }
}
</style>
</head>
<body>
<br>
    <div>
        <nav class="footer">
            <ul>
                <li>1 <a href="#">Batman</a></li>
                <li>2 <a href="#">Superman</a></li>
                <li>3 <a href="#">Ironman</a></li>
                <li>4 <a href="#">Thor</a></li>
                <li>5 <a href="#">Hulk</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

显然，我还在学习。

Answer 1

nav.footer{
 margin: 0 auto;
}

Answer 2

您的代码缺少什么：

nav{width:100%; /* 100% width of the parent container */ }
nav>ul{list-style-type:none;/*still leaves margin and padding*/
    margin:0px;
    padding:0px;
}

Answer 3

添加到nav.footer：

 margin:0 auto; // or margin:auto
 margin-bottom:30px; //change this value as you want

导航的

margin:0 auto;或margin:auto;居中。
从底部margin-bottom:30px;边距 - 30像素。

Answer 4

选中此Fiddle

将此添加到您的css

nav.footer{
   margin:0 auto;
}

HTML 5 <nav>居中</nav>

4 个答案: