我目前的工作在以下WordPress站点:更改宽度和中心WordPress的水平菜单项
很明显,横向菜单项不正确的风格。我希望“媒体”链接适合导航栏的右侧;我该如何去改变每件商品的宽度,使它们都适合?
我也希望菜单项被居中,这样每边的边距都是相等的。我对现有Wordpress主题的CSS的知识是粗略的;谁能给我一些指导?
我目前的工作在以下WordPress站点:更改宽度和中心WordPress的水平菜单项
很明显,横向菜单项不正确的风格。我希望“媒体”链接适合导航栏的右侧;我该如何去改变每件商品的宽度,使它们都适合?
我也希望菜单项被居中,这样每边的边距都是相等的。我对现有Wordpress主题的CSS的知识是粗略的;谁能给我一些指导?
这是一个有点“脏”,因为它是特定于您的菜单和已列入它的名字定制。但也许是有用的:
.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;
}
当然,你可以做到这一点。
查看菜单的css文件并找到.your_menu_name li a
部分。在这里寻找填充,只是调整大小。
例如,如果是padding-left:30px;
用10
替换30
并看到你的工作菜单。
您可以通过添加悬停状态像background-color:#CCCCCC;
对不起! – 5wpthemes 2013-04-23 18:39:16
您可以通过使用CSS3伪类:nth-child(N)
选择每个菜单项,请参阅this。例如:
.nav-menu li:nth-child(3) {
display: block;
width: 300px; /*Your individual menu-item width here*/
}
结合你的菜单中心,你必须改变你的CSS在style.css
(行号: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%;
}
我不认为这是可能的与CSS,因为浏览器根本无法知道项目的宽度将是什么。一种解决方案是单独对边距进行硬编码。其他解决方案是使用Javascript。就我个人而言,我会和前者一起去。如果你使用后者,每次页面加载时都会看到菜单“闪烁”,并且每个人都讨厌这一点。 – 2013-04-23 18:10:49