html - 为什么元素不完全在中心？

Question

我在 ul 元素中有一个 url 列表，我希望该列表在一行中。我试过了 this way将它们放在页面的中心，但它们并不完全位于中心。

这是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>

这是我试过的风格

.inner-li {
    font-size: 1.25em;
    float: left;
    margin-left: 1em;
    list-style-type: none;
}
@media screen and (min-width: 21em) {
    #links {
        width: 21em;
        margin: 0 auto;
    }
}

你可以在JsFiddle中看到它.

Answer 1

将 display:table 和 padding:0 添加到 #links 中，例如:

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

同时添加

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

因为第一个 li 元素不需要 margin-left

fiddle