CSS：如何使水平列表居中？显示：内联不工作

Posted 2023-03-05

【中文标题】CSS：如何使水平列表居中？显示：内联不工作

【英文标题】：CSS: How can I center a horizontal list? Display:Inline not working

【发布时间】：2012-07-03 11:42:36

【问题描述】：

我在让最简单的代码工作时遇到了很大的麻烦。我希望我的 CSS 水平列表居中，仅此而已。

链接：http://bit.ly/LtIBai

我有这个代码：

#megaMenu.megaMenuHorizontal ul.megaMenu 
text-align: center;
 

#megaMenu.megaMenuHorizontal ul.megaMenu > li 
display: inline;

但它不会居中？

注意：窗口必须为“平板电脑纵向”大小才能看到我所指的代码。大约 800 像素宽，当徽标居中并且菜单下降到下一行时，但在移动菜单出现之前。

【问题讨论】：

老兄，你真的应该考虑一下你的选择器，这看起来不太好。例如，当您有 ID 时，为什么要拨打 #megaMenu.megaMenuHorizontal？另外，不要使用ul.megaMenu，因为浏览器会首先查找所有ul，然后从那些中选择.megaMenu。你确定不能只使用#megaMenu ul 和#megaMenu li 之类的东西吗？干杯。

【参考方案1】：

他们拒绝居中的原因是因为他们也浮动到左边。将dislay: inline 更改为display: inline-block; float: none，它们会居中显示。

编辑：那里有很多（大部分是不必要的）CSS 代码，所以你可能需要调整一些其他的东西才能让它看起来正确，但是浮动是导致非至少居中。

【讨论】：

谢谢！！它完美地工作。是的，mega menus 插件提供了各种无意义的 css。但现在就可以了！