0

这是我下面的当前菜单。

菜单 -

<ul id="menu"> <li class="one"><a href="http://www.domain.com">Dashboard</a></li>
<li><img src="images/menu-divide.png"></li>
<li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
<li><img src="images/menu-divide.png"></li>
<li><?php bp_adminbar_notifications_menu() ?></li>  
<li><img src="images/menu-divide.png"></li>
<li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a>
<li><img src="images/menu-divide.png"></li> 
<li class="five"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li></ul>

这是CSS -

ul#menu li {
    list-style: none;
    float: left;
    margin: 0 0px 0 0;
}

li.one a{
    border-top-left-radius: 3px 3px;
    border-bottom-left-radius: 3px 3px;
    border-right:none;
width:88px;
}
li.two a, li.three a {
}
li.five a{
    border-top-right-radius: 3px 3px;
    border-bottom-right-radius: 3px 3px;
    border-left:none;
}

ul#menu li a:link, ul#menu li a:visited {
    display: block;
    text-align: center;
    width: 88px;
    height: 53px;
    line-height: 53px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-size: 13px;
    color: #05687b;
    letter-spacing: 1px;
    outline: none;
    float: left;
    background: #fff;

}
ul#menu li a:hover {
    background-color: #EDF7FA;
    color: #05687B;

}

如何使菜单中的第一项更宽，例如 95 像素，我无法更改一个菜单项，因为它会改变一切。如果可以，请你帮助我。

我不能再写这个了，但是 stackoverflow 说我必须写，太好了。

谢谢

4

3 回答 3

0

您只需要对 css 进行一个小修正：

li.one a {
    border-top-left-radius: 3px 3px;
    border-bottom-left-radius: 3px 3px;
    border-right:none; padding:0px 100px 0px 100px;
    width:88px;
}
于 2012-06-29T12:19:20.593 回答
0

将这些行添加到您的代码中

#menu li:first-child {
    width: 95px;
}

或者

因为您的第一个“li”元素附加了一个类“one”，所以您可以使用

#menu li.one{width:95px;}

这是一个小提琴，第一个子元素的宽度设置为 150px，第二个元素的宽度设置为 30px，因此更容易注意到差异：http: //jsfiddle.net/mymlyn/8sFSZ/1/

这就是它的工作原理：http ://www.w3schools.com/cssref/sel_firstchild.asp

于 2012-04-29T12:48:05.803 回答
0

非常简单，通过使用类引用<a>列表项内部的节点，.one我们可以更改整个项的宽度，而不管分配给它的任何其他规则<a>。

解决方案：

  #menu li.one a{
    width: 150px !important;
}

参考：

！重要的

笔记：

尽管 !important 不是必需的，因为在代码末尾添加没有它的相同 css 也可以，但我觉得这避免了解决问题的进一步问题。

于 2012-04-29T12:51:19.263 回答