为什么元素不完全在中心？答案

【问题标题】：why the element are't exactly in the center?为什么元素不完全在中心？
【发布时间】：2014-12-15 14:44:51
【问题描述】：

我在ul 元素中有一个网址列表，我希望该列表位于一行中。我试过 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看到它。

【问题讨论】：

标签： html css html-lists

【解决方案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

【讨论】：

【解决方案2】：

它没有居中，因为您已为 <li> 应用了 margin-left。

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

这会将第一个 <li> 推离中心 1em。

您可以通过将其更改为padding: 0 .5em 来实现相同的布局。

Demo

【讨论】：

【解决方案3】：

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

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

#links {
    min-width: 100%;
}

【讨论】：