对于 HTML 来说仍然很新，如果这是一个非常简单的问题，我们深表歉意......
我在格式化时遇到了问题，我已经尝试将我的文档的导航元素居中，但它们似乎没有正确地做到这一点。
这是浏览器中问题的图像 - http://i.imgur.com/A6630.png
这是我的 HTML。 (里面有一些蛋糕 ipsum)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Me Example Page:</title>
<link href="../css/aboutcss.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<h1><img src="../images/about/aboutlogo.png" alt="About Me" style="height:100px;"></h1>
<nav>
<ul>
<hr align="center"/>
<li><a href="../index.html">Home</a></li>
<li><a href="../portfolio/index.html">Portfolio</a></li>
<li><a href="../contact/index.html">Contact</a></li>
<li><a href="../blog/index.html">Blog</a></li>
<hr />
</ul>
</nav>
<img src="../images/about/aboutmephoto.jpg" id="me">
<p>Hello there!</p>
<p>Liquorice powder liquorice dragée macaroon. Dessert oat cake pastry cheesecake wypas brownie icing. Marzipan sweet dragée icing candy wafer tart macaroon pie. Halvah liquorice pie carrot cake pie. </p>
<p>Liquorice powder liquorice dragée macaroon. Dessert oat cake pastry cheesecake wypas brownie icing. Marzipan sweet dragée icing candy wafer tart macaroon pie. Halvah liquorice pie carrot cake pie. </p>
<hr align="center" width="50%" />
<p>Liquorice powder liquorice dragée macaroon. Dessert oat cake pastry cheesecake wypas brownie icing. Marzipan sweet dragée icing candy wafer tart macaroon pie. Halvah liquorice pie carrot cake pie. </p>
<p>Liquorice powder liquorice dragée macaroon. Dessert oat cake pastry cheesecake wypas brownie icing. Marzipan sweet dragée icing candy wafer tart macaroon pie. Halvah liquorice pie carrot cake pie. </p>
<footer>
© Me 2012
</footer>
</div>
</body>
</html>
以及同一页面的 CSS:
body {
background-color: #3D3D3D;
}
p, a, footer {
font-family: 'Open Sans', Sans Serif;
}
h1 * {
height: 125px;
display: block;
margin: 0 auto;
}
p {
color:#E2E2E2;
font-size: 13px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}
footer {
font-size: 9px;
padding-bottom: 8px;
text-align: center;
color:#E2E2E2;
}
nav {
text-align:center;
}
nav li {
display: inline;
}
nav a {
display: inline-block;
text-decoration: none;
color: #E2E2E2;
font-size: 17px;
font-variant: small-caps;
font-weight: bold;
padding:0;
margin-left: 3em;
margin-right: 3em;
}
a:visited {
color:#E2E2E2;
}
#wrapper {
max-width: 1200px;
width: 90%;
background-color: #1A1A1A;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 2px;
border-color: black;
}
#me {
margin: 25px;
border-style: solid;
border-width: 5px;
border-color: #656565;
height:300px;
float:right;
}
在此先感谢您的帮助!
最佳答案
移除 hr of ul。
并放置:
nav ul {
border-width: 2px 0px 2px 0px ;
border-style: solid ;
border-color: #FFFFFF;
padding: 5px 0px 5px 0px;
}
问候。
关于HTML ul 元素没有正确居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13813212/