wordpress-theming - 使用 UL、LI 渲染的居中菜单

Question

给定一个由带有 HTML 标签 UL 和 LI 的 Wordpress 主题“二十一”创建的菜单，我们如何才能使 LI 项目居中。当显示变窄并且菜单占用两行时，客户希望将单个项目居中。

单行菜单

分割线菜单，尚未居中

CSS 为#access UL

#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您可能需要稳定填充、宽度或高度以获得更好的查看效果。