Question

我的测试页面的链接 - 我的nav-ul-li栏中心测试正在进行 - 如下：http://bramh.coornhert.website/startpagina.html

代码如下：

＆＃13;

header {
color: GhostWhite;
text-align: center;
font-size: 60px;
margin: 0px;
font-family: courier new;
}
body {background-image: url("images/wallpapermain.jpg");
color: white;
} 
p { border-width: 3px;
   border-style: groove;
   border-color: light-blue;
   background-color: black;
   border-radius: 10px;
   height: 1200px;
   width: 1000px;
   text-align: center;
   font-family: "verdana";
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 50px;
   margin-top: 50px;
}

img {border-radius:10px;
}
a:link.img { color:#007DC5;
text-decoration:none;
font-weight:bold;
}
a:visited.img { color:#007DC5;
text-decoration:none;
font-weight:bold;
} 
a:hover.img { color: red;
text-decoration:underline;
font-weight:bold;
}
/* menu */
a:link,a:visited {
font-weight: bold;
color: white;
background-color: black;
border: 2px #033 ridge;
border-radius: 10px; 
width: 140px;
text-align: center;
padding: 4px;
margin-bottom: 10px;
text-decoration: none;
}
a:hover,a:active {
background-color: dark-grey; 
color: orange;
width: 140px;
}
nav {
width: 800px;
height: 30px;
padding-top: 0px; 
}
ul {
margin:0;
position: fixed;
list-style-type: none;
padding: 0;
text-align: center;
}
nav{
text-attachment: fixed;
}
a.huidig_blauw {
background-color: white;
color: black;
}
a.huidig_rood {
background-color: green;
color: black;
width: auto;
}
a.tweede_menu {
background-color: red;
color: blue;
width: auto;
}
/* CSS Document */

＆＃13;

<!DOCTYPE html>
<head>
    <title>Website Bram</title>
    <link href="shoop.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>Bram Heesen</header> 
    <nav>
        <ul>
            <li>
                <a class="huidig_blauw" href="startpagina.html">HOME</a>
                <a class="huidig_rood" href="paginainformatica.html">Pagina Informatica</a>
                <a class="huidig_rood" href="paginamijzelf.html">Over Mij</a>
                <a class="huidig_rood" href="paginakeuzeonderwerp.html">PaginaKeuzeonderwerp</a>
            </li>
        </ul>
    </nav>
    <p>
        <br><br>
    	<audio controls="controls"autoplay="autoplay">
            <source src="music/chiptune.ogg" type="audio/ogg" />
            <source src="music/chiptune.mp3" type="audio/mpeg" />
            Sorry, je internetprogramma kan deze muziek niet laten horen.
        </audio>
    </p>
</body>
</html>

＆＃13;

Answer 1

将来您应该直接在帖子中提供您的代码，这样如果有人在以后偶然发现您的问题，他们就会看到问题。如果您链接到自己的网站，然后在网站上修复问题，或网站不再显示，则该链接与问题无关。

也就是说，您可以移除float:left;并将text-align:center;添加到ul来集中菜单元素。

ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

欢迎来到SO！

更新使用OP的代码

＆＃13;

header {
color: GhostWhite;
text-align: center;
font-size: 60px;
margin: 0px;
font-family: courier new;
}
body {background-image: url("images/wallpapermain.jpg");
color: white;
} 
p { border-width: 3px;
   border-style: groove;
   border-color: light-blue;
   background-color: black;
   border-radius: 10px;
   height: 1200px;
   width: 1000px;
   text-align: center;
   font-family: "verdana";
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 50px;
   margin-top: 50px;
}

img {border-radius:10px;
}
a:link.img { color:#007DC5;
text-decoration:none;
font-weight:bold;
}
a:visited.img { color:#007DC5;
text-decoration:none;
font-weight:bold;
} 
a:hover.img { color: red;
text-decoration:underline;
font-weight:bold;
}
/* menu */
a:link,a:visited {
font-weight: bold;
color: white;
background-color: black;
border: 2px #033 ridge;
border-radius: 10px; 
width: 140px;
text-align: center;
padding: 4px;
margin-bottom: 10px;
text-decoration: none;
}
a:hover,a:active {
background-color: dark-grey; 
color: orange;
width: 140px;
}
nav {
height: 30px;
padding-top: 0px; 
}
ul {
margin:0;
list-style-type: none;
padding: 0;
text-align: center;
}
nav{
text-attachment: fixed;
}
a.huidig_blauw {
background-color: white;
color: black;
}
a.huidig_rood {
background-color: green;
color: black;
width: auto;
}
a.tweede_menu {
background-color: red;
color: blue;
width: auto;
}
/* CSS Document */

＆＃13;

<header>Bram Heesen</header> 
<nav>
<ul>
<li>
<a class="huidig_blauw" href="startpagina.html">HOME</a>
<a class="huidig_rood" href="paginainformatica.html">Pagina Informatica</a>
<a class="huidig_rood" href="paginamijzelf.html">Over Mij</a>
<a class="huidig_rood" href="paginakeuzeonderwerp.html">PaginaKeuzeonderwerp</a>
</li>
</ul>
</nav>
<p>
<br><br>
<audio controls="controls"autoplay="autoplay" >
<source src="music/chiptune.ogg" type="audio/ogg" />
<source src="music/chiptune.mp3" type="audio/mpeg" />
Sorry, je internetprogramma kan deze muziek niet laten horen.
</audio>

</p>

＆＃13;

我希望我的导航栏能够居中，但我所做的一切似乎都无法影响它

1 个答案: