导航 li 对齐答案

【问题标题】：Navigation li alignment导航 li 对齐
【发布时间】：2012-06-02 10:32:43
【问题描述】：

我遇到了一个问题，我无法让我的 'li' 宽度正确。我有我正在处理的设计，它们看起来大约是20px，与display:inline-block 分开，但我似乎无法得到正确的数字。 JS Fiddle

HTML：

<div class="footer">
            <nav>
                <ul>
                    <li><a href="#">Terms of Use</a></li>
                    <li><a href="#">Site Map</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Company</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>    
            </nav>

            </div>

CSS：

.footer nav{
    float:right;
    width:530px;
    padding:13px 0 0 0;
}
.footer nav ul{
    list-style:none;
}
.footer nav li{
    display:inline-block;
    width:80px;
    text-align:center;
}
.footer nav li a{
    text-decoration:none;
    color:#000;
}

【问题讨论】：

标签： css alignment html-lists

【解决方案1】：

如果您希望它们之间的距离是固定的，则不能对宽度可变的内容使用固定宽度的列表项，也不能使文本居中。只需将宽度保留为 auto，并设置 20px 的 margin-right 以使它们彼此分开。

【讨论】：