Css Center ul li inside nav

Posted 2023-03-29

【中文标题】Css Center ul li inside nav

【英文标题】：

【发布时间】：2016-01-03 00:01:54

【问题描述】：

如何在导航中将带有 li 标签的水平 ul 居中：

        <nav>
            <ul>
                <li>
                    <a href="" title=""></a>
                </li>
                <li>
                    <a href="" title=""></a>
                </li>
                <li>
                    <a href="" title=""></a>
                </li>
            </ul>
        </nav>

【参考方案1】：

如何居中呢？水平垂直？你想改变<li>的方向吗？

这里有一个可能是您想要的代码笔。

http://codepen.io/anon/pen/wKdgyd

【讨论】：

谢谢我帮助了我，但刚刚找到了一个使它们水平的解决方案

你应该告诉我们你做了什么，当有人遇到类似问题时你可以帮助他们。

【参考方案2】：

找到解决办法

html:

<div class="main">
        <nav>
            <ul>
                <li>
                    <a href="" title=""></a>
                </li>
                <li>
                    <a href="" title=""></a>
                </li>
                <li>
                    <a href="" title=""></a>
                </li>
            </ul>
        </nav>
</div>

还有css：

.main nav 
    width: auto;
    height: 80px;
    margin: 0 auto 0 auto;
    display: block;

.main nav ul 
    height: auto;
    margin: 21px auto 0 auto;


.main nav ul li 
    float: left;
    margin: 19px 0 12px;
    width: 33.3%;
    text-align: center;