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;

}

メニューの最初の項目の幅を 95px にするにはどうすればよいですか。1 つのメニュー項目を変更するとすべてが変更されるため、1 つのメニュー項目を変更することはできません。できれば助けてください。

これについてはこれ以上書くことはできませんが、stackoverflow はそうしなければならないと言っています。

ありがとう

4

3 に答える 3

0

非常に簡単に言えば、<a>クラスでリスト項目内のノードを参照する.oneことにより、それに割り当てられた他のルールに関係なく、項目全体の幅を変更できます<a>。

解決：

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

参考文献:

！重要

ノート：

コードの最後に !important を追加せずに同じ css を追加しても同様に機能するため、重要ではありませんでしたが、これにより、問題を解決する際のさらなる問題を回避できると感じました。

于 2012-04-29T12:51:19.263 に答える
0

これらの行をコードに追加します

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

また

最初の「li」要素にクラス「one」が追加されているため、次のようにすることができます

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

これは、最初の子で幅が 150px に設定され、2 番目の要素で 30px に設定されたフィドルであるため、違いに気づきやすくなっています。

これがどのように機能するかです: http://www.w3schools.com/cssref/sel_firstchild.asp

于 2012-04-29T12:48:05.803 に答える
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 に答える