css - 更改宽度和居中 Wordpress 水平菜单项

Question

我目前正在以下 Wordpress 网站上工作：

http://2013.whitehallrow.com/

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

我还希望菜单项居中，以便每一侧的边距相等。我对现有 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

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

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

2. 要将您的菜单对齐到中心，您必须将您的 css in style.css(line no: 1460) 更改为以下

   .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%;
   }