我只是在尝试练习 jsfiddle 时遇到了一个我无法解决的问题。所以希望你们中的一些人可以在这里帮助我。这似乎是一个关于 CSS 基础知识的愚蠢问题，但出于某种原因，这个问题让我很感兴趣。
基本上，我在 jsfiddle 上创建了一个通用导航，我需要将 ul 元素居中。我不确定为什么它们会卡在屏幕左侧。
http://jsfiddle.net/jrich/ker1jLdf/
CSS 和 HTML 如下:
body {
background-color: #45859E;
font-family:'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
margin: 0;
padding: 0;
}
ul {
padding: 0;
margin: 0 auto;
}
a:link {
text-decoration: none;
}
h3 {
padding: 5px;
margin: 0;
}
header {
width: 100%;
background-color: #FFF;
margin: 0 auto;
border-bottom: solid 5px #00729B;
}
#nav {
margin: 0 auto;
padding: 10px 0;
}
#nav ul {
width: 100%;
margin: 0 auto;
}
#nav ul li {
text-align: center;
width: 100px;
display: inline-block;
border-bottom: solid 5px #00729B;
color: #000 border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
margin: 0 auto;
}
ul li h3 {
text-transform: uppercase;
}
ul li:hover {
color: #999999;
border-color: #00729B;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(78%, #ffffff), color-stop(78%, #ffffff), color-stop(100%, #00729b));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
/* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
/* W3C */
}<body>
<header>
<div id="nav">
<ul>
<li id="one">
<h3><a href="">Home</a></h3>
</li>
<li>
<h3><a href="">About</a></h3>
</li>
<li>
<h3><a href="">Contact</a></h3>
</li>
</ul>
</div>
</header>
</body>
谢谢!
最佳答案
关于html - CSS/HTML 试图居中导航元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30612798/