我试图在以下页面中居中链接1,链接2和链接3:
http://i.imgur.com/qNimZCs.png?1
这是html的相关部分:
<a class="logo" href="#"><p>Logo</p></a>
<ul class="nav">
<li><a class="link" href="#"><p>Link 1</p></a></li>
<li><a class="link" href="#"><p>Link 2</p></a></li>
<li><a class="link" href="#"><p>Link 3</p></a></li>
</ul>
这是CSS:
.link
{
font-size: 1em;
margin-left: 0;
margin-right: 0;
font-weight: none;
text-decoration: none;
color: #123456;
display: inline-block;
padding: 0 0;
}
.nav
{
margin-left: 0;
display: inline-block;
margin-bottom: 5px;
margin-top: 5px;
}
.nav li
{
display: inline-block;
margin: auto;
}
我已经尝试过我能想到的所有组合。
具体来说,我正在尝试将链接居中,以使所有链接沿着导航栏均匀分布。有人看到我在做什么错吗?
编辑:
jsfiddle链接:http://jsfiddle.net/B362m/
最佳答案
尝试这个:
.nav
{
display: inline-block;
margin-left: 5%;
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
}
Working Fiddle