使用UL，LI渲染的居中菜单

Question

给定一个由Wordpress主题“Twenty Eleven”创建的菜单，其中包含HTML标签UL和LI，我们如何才能将LI项目居中。当显示器变窄并且菜单消耗两行时，客户希望将各个项目置于中心。

单行菜单

分割线菜单，尚未居中

#access UL

的CSS

#access ul {
    font-size: 13px;
    list-style: none outside none;
    margin: 0px 0px 0px -0.8125em;
    padding-left: 0px;
}

LI的CSS

#access li {
    float: left;
    position: relative;
}

Answer 1

1. 在text-align: center;

中添加width: 100%;和#access ul

2. 将float: left;切换为display: inline;中的#access li。您可能需要固定填充物，宽度或高度以便更好地观看。