需要将列表项向左浮动以避免边距，但希望它在页面中居中答案

【问题标题】：Need to float list items left to avoid margin, but want it centered in the page需要将列表项向左浮动以避免边距，但希望它在页面中居中
【发布时间】：2014-05-19 21:13:34
【问题描述】：

我希望有一个位于页面中心的列表项菜单。我将它们显示为内联，使其居中并且看起来很棒。但是当我为 a:hover 添加装饰时，我注意到项目之间有大约 3px 的边距。我将列表和列表项中的所有内容的边距和填充设置为 0。我发现这是一种自动边距，因为它是内联的（内联块）。我看到的建议是将其保留为内联并执行以下操作：

<li>ListItem1</li><li>ListItem2</li>...

或

<li>ListItem1</li><li>
ListItem2</li><li>
ListItem3</li>...

但是，无论哪种情况，它都不是最好的阅读方式。有什么方法可以浮动我的列表项，以便它们之间没有边距，但菜单在页面中居中。这是我正在使用的代码：

<div id="iccmenu">
    <ul>
        <li><a href="#">H o m e</a></li>
        <li><a href="#">F o r u m s</a></li>
        <li><a href="#">C h a t</a></li>
        <li><a href="#">C o l l e c t i o n s</a></li>
        <li><a href="#">T r a d e</a></li>
        <li><a href="#">M e s s a g e s</a></li>
        <li><a href="#">H e l p</a></li>
    </ul>
</div>

还有 CSS。

#iccmenu
{
    text-align:center;
}

#iccmenu ul
{
    padding:0;
    margin:0;
}

#iccmenu ul li
{
    float:left;
    list-style:none;
    border:0;
    border-left:1px solid black;
    font-size:18px;
    padding:0;
    margin:0;
}

#iccmenu ul li:first-child
{
    border-left:0;
}

#iccmenu a
{
    text-decoration:none;
    color:orange;
    text-shadow:1px 1px 0px grey;
    padding:7px 25px;
    margin:0;
}

#iccmenu a:hover
{
    background-color:grey;
    text-shadow:none;
}

【问题讨论】：

标签： css menu css-float inline

【解决方案1】：

对于您正在使用的相同代码，如果您想让它们居中，请在 #iccmenu ul 上尝试此操作

margin: 0 auto;
display: table;

http://jsfiddle.net/LepD9/

【讨论】：

非常感谢。我完全忘记了汽车一秒钟。谢谢。

【解决方案2】：

我会添加使用这个：

#iccmenu ul
{
    padding:0;
    margin:0;
    min-width:960px;
    margin: 0 auto;
    display: table;
}

所以当页面小于需要时它不会中断 min-width

你可以通过添加与链接高度相同的行高来修复悬停效果My jsfiddle：

#iccmenu a{   
 line-height:34px;
}

【讨论】：