Question

这是我目前的菜单。

菜单 -

<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;

}

如何使菜单中的第一项更宽，比如95px，我无法更改一个菜单项，因为它会更改所有菜单项。如果可以，请你帮助我。

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

由于

Answer 1

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

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

OR

因为你的第一个“li”元素上有一个“一个”类，你可以使用

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

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

这是如何工作的：http://www.w3schools.com/cssref/sel_firstchild.asp

Answer 2

非常简单，通过使用类<a>引用列表项内的.one节点，无论分配给<a>的任何其他规则如何，我们都可以更改整个项目的宽度

解决方案：

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

jsfiddle

<强>参考文献：

!important

注意：

尽管！important不是必需的，因为在没有它的情况下添加相同的css到代码的末尾也会起作用，我觉得这可以避免在解决问题时的进一步问题。

Answer 3

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

在菜单中使项目更宽

3 个答案: