Question

我希望发生的是在页面中居中的列表项菜单。我把它们显示为内联，让它居中，看起来很棒。但当我添加装饰到a：悬停时，我注意到物品之间有大约3px的边距。我在列表和列表项中的所有内容上都设置了margin和padding为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;
}

Answer 1

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

上试试

margin: 0 auto;
display: table;

http://jsfiddle.net/LepD9/

Answer 2

我将添加使用此：

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

因此当页面小于所需 min-width

时，它不会中断

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

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

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

2 个答案: