如何让已居中的ul列表项水平排列

嘿，我来帮你搞定这个问题！你现在的列表项（li）默认是块级元素，所以会自动垂直换行。要改成水平排列，有两种常用的方法，我都给你整理好了：

方法1：使用Flexbox（推荐，现代浏览器都支持） #

Flexbox是现在布局的首选方案，代码简洁还易维护。你只需要给ul加上display: flex，再调整下间距就可以了，同时保持ul居中的效果：

<nav style="margin: 0; padding: 0; text-align: center;">
  <ul style="list-style: none; display: flex; gap: 20px; /* 控制列表项之间的间距 */ justify-content: center;">
    <li><a href="">obj1</a></li>
    <li><a href="">obj2</a></li>
    <li><a href="">obj3</a></li>
    <li><a href="">obj4</a></li>
    <li><a href="">obj5</a></li>
  </ul>
</nav>

解释一下：

• display: flex让ul变成弹性容器，里面的li会自动水平排列
• gap: 20px用来设置列表项之间的空白间距，你可以根据需要调整数值
• justify-content: center确保列表项在ul容器里居中，配合nav的text-align: center就能完美保持整体居中的效果
• 原来的clear: bothdiv可以删掉了，Flexbox不需要这个来清除浮动

方法2：传统浮动方法（兼容旧浏览器） #

如果你需要兼容一些非常老的浏览器（比如IE9及以下），可以用浮动的方式：

<nav style="margin: 0; padding: 0; text-align: center;">
  <ul style="list-style: none; display: inline-block; overflow: hidden;">
    <li style="float: left; margin-right: 20px;"><a href="">obj1</a></li>
    <li style="float: left; margin-right: 20px;"><a href="">obj2</a></li>
    <li style="float: left; margin-right: 20px;"><a href="">obj3</a></li>
    <li style="float: left; margin-right: 20px;"><a href="">obj4</a></li>
    <li style="float: left;"><a href="">obj5</a></li> <!-- 最后一个li不需要右边距，避免多余空白 -->
  </ul>
</nav>

解释一下：

• 给每个li加上float: left，让它们水平排列
• 把ul的display: inline改成display: inline-block，这样它能被nav的text-align: center居中，同时内部浮动元素不会溢出
• 用margin-right设置列表项之间的间距，最后一个li去掉右边距更美观
• 用ul的overflow: hidden代替原来的clear: bothdiv，清除浮动带来的布局问题

两种方法都能实现你要的效果，优先推荐Flexbox，代码更简洁，布局更灵活~

内容的提问来源于stack exchange，提问作者akaManen