我试图在以下页面中居中链接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

10-05 20:59
查看更多