Question

我目前正在开发以下Wordpress网站：

http://2013.whitehallrow.com/

很明显，水平菜单项没有正确设置样式。我希望“Media”链接适合导航栏的右侧;如何更改每个项目的宽度以使它们都适合？

我还希望菜单项居中，这样每边的边距都相等。我对现有Wordpress主题CSS的了解是粗略的;谁能给我一些指导？

Answer 1

这有点“脏”，因为它特定于您的菜单以及已包含在其中的名称。但也许有用：

.main-navigation li {
    margin: 0 30px 0 0;
    position: relative;
}

/* For the distance of the first element */
main-navigation li:first-child {
    margin-left: 50px;
}

/* For nulling the distance of the first child element */
.menu-item-type-post_type li:first-child {
    margin-left: 0;
}

Answer 2

当然你可以做到。

查看菜单css文件并找到.your_menu_name li a部分。在这里寻找填充并调整大小。

对于前。如果padding-left:30px;将30替换为10并看到您的工作菜单。

您可以通过添加像background-color:#CCCCCC;

这样的悬停条件来自定义

Answer 3

您可以使用CSS3伪类:nth-child(N)选择每个菜单项，请参阅this。例如：

.nav-menu li:nth-child(3) {
    display: block;
    width: 300px; /*Your individual menu-item width here*/
}

要将菜单与中心对齐，您必须将style.css（行号：1460）中的css更改为以下

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    border-bottom: 1px solid #8293FF;
    border-top: 1px solid #8293FF;
    display: table;
    text-align: center;
    width: 100%;
}

改变宽度和宽度以Wordpress水平菜单项为中心

3 个答案: