Html 为什么元素是'；不正是在中间吗？

我在

ul

元素中有一个URL列表，我希望列表在一行中。我试着把它们放在页面的中间，但它们并不完全在中间

这是HTML代码

<ul id="links">
    <li class="inner-li"> <a href="about">about</a>

    </li>
    <li class="inner-li"> <a href="http://ahmadalli.net/projects">projects</a>

    </li>
    <li class="inner-li"> <a href="http://photo.ahmadalli.net">photoblog</a>

    </li>
    <li class="inner-li"> <a href="music">music</a>

    </li>
</ul>

---

您可以在中看到它。

将此代码添加到css文件中：

您应该定义菜单宽度和其他必要的代码

#links {
    min-width: 100%;
}

---

它不居中，因为您已为

应用了

左边距

.inner-li {
 font-size: 1.25em;
 float: left;
 margin-left: 1em; /* this */
 list-style-type: none;
}

这会将第一个
推离中心1米

您可以实现相同的布局，将其改为
padding:0.5em
居中

添加
显示：表格
和
填充：0
到
#链接
如：

@media screen and (min-width: 21em) {
    #links {
        display:table;
        margin: 0 auto;
        padding: 0;
    }
}

还加

#links > li:first-child{
    margin:0;
}

导致第一个
li
元素无需保留
页边距


#links > li:first-child{
    margin:0;
}