Question

我是建立网站的新手，所以如果我以错误的方式解决这个问题，请告诉我。我的代码如下：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="#">Page1</a></li>
            <li><a href="#">Page2</a></li>
            <li><a href="#">Page3</a></li>
            <li><a href="#">Page4</a></li>
        </ul>
    </nav>
</header>
<body>

</body>
<footer>

</footer>

CSS：我试图放置一个＆＃34; text-align：center;＆＃34;在li，ul和元素中，但是没有用。我可能对如何正确格式化导航栏有错误的想法。

header 
{
    text-align: center;
}
header nav ul 
{
    list-style-type: none;
    margin: 0px;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

header nav ul li {
    float: right;
}

header nav ul li a 
{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 25px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}

header nav ul li a:hover 
{
    background-color: #6600CC;
}

body 
{
    background-color: #E0E0E0;
}

如何正确格式化CSS导航栏以使其位于页面的顶部中心？

0 个答案: