使項目更廣泛的菜單

菜單 -

<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，我不能改變一個菜單因爲它改變了一切。如果可以，請你幫助我。

我不能寫了這個，但計算器說我要，太好了。

感謝

來源

2012-04-29 Josh Hall

這些行添加到您的代碼

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

，因爲你有一類「一」 atached你的第一個「禮」的元素，你可以用

去

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

這裏是具有設定寬度的撥弄到150像素上的第一個孩子和30PX第二元件上，從而它更容易發現其中的差別：http://jsfiddle.net/mymlyn/8sFSZ/1/

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

來源

2012-04-29 12:48:05 mymlyn

如果我這樣做，我得到一個缺口 - 見PIC - [鏈接]（http://i47.tinypic.com/2unzotx.png ） – 2012-04-29 12:55:28

我想你可能有一個更大的問題與您的代碼，您使用的圖像分割你的菜單項？你可以只設定背景爲特定顏色，並使用填充/保證金，以獲得您所需要的效果。 – mymlyn 2012-04-29 13:02:04

解決方法是不擴大李的大小，但它的內部哈哈 – 2012-04-29 13:05:03

很簡單，通過引用與類.one列表項內的<a>節點，我們可以改變整個項目的寬度不管分配給<a>任何其他規則。

解決方案：

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

jsfiddle

參考文獻：

!important

注：

雖然！重要的是沒有必要的，因爲沒有它添加相同的css到代碼的末尾也會工作，我覺得這樣可以避免解決問題的進一步問題。

來源

2012-04-29 12:51:19

如果我這樣做，我得到一個差距 - [鏈接]（http：//i47.tinypic .com/2unzotx.png） – 2012-04-29 12:55:16

再次更新，使其符合非css3瀏覽器 – 2012-04-29 13:09:06

您的偉大，謝謝 – 2012-04-29 13:27:14

只是有你需要的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-29 12:19:20

使項目更廣泛的菜單

回答

相關問題