0

a:selected クラスの背景画像が下と上の両方でカットされている理由を理解しようとしています。height:!important;andmin-height;を.main_menu ul liandに割り当てようとしまし.main_menu ul li a.selectedたが、何か他のものが背景画像のサイズ (17x21px) を制限しているようです

画像を提供したかったのですが、私は新しいので、許可されません:(画像は円で、小さなコンテナに収まるように、上下にスライスされています

これがコードです、何か提案をありがとう！

.menu_container{
    position: absolute;
    float: left;
    width: 270px;
    margin-top: 220px;  
}
.main_menu ul { 
    padding: 0px; 
    margin:0px;
    list-style-type: none;  
}
.main_menu ul li {
    font-family:Arial, Helvetica, sans-serif; 
    font-size:11px; 
    letter-spacing:4px;
    text-align:right; 
    line-height:35px;  
    list-style-type:none;
}
.main_menu ul li a  {
    padding-right: 25px;  
    text-decoration:none;  
    color:#999; 
} 
.main_menu ul li a.selected {
    color: #bc4c9b;
    font-weight:bold; 
    background: url(images/circle.gif) right center no-repeat;
    height: 35px!important;  
}   
.main_menu ul li:hover {
    text-decoration:none;  
    color:#999;  
    font-weight:bold;  
    background:url(images/circle_grey.gif) right center no-repeat;
}
4

4 に答える 4

1

次のルールを書き直してみてください。

.main_menu ul li a  {
    padding-right: 25px;  
    text-decoration:none;  
    color:#999; 
    display:block;
}
于 2012-04-23T05:00:58.533 に答える
0

背景はアンカータグ（.main_menu ul li a）に添付されているため、フォントサイズに合わせてサイズが変更されます。バックグラウンドファイル全体を表示するには、ブロックするアンカー要素を作成するか、パディングを使用する必要があります。使用する：

display: inline-block;

また

display: block;

または、.main_menu ulliaにパディングを使用します

于 2012-04-23T05:12:58.977 に答える
0

display:inline-block;を定義するだけです。あなたのli aで、更新されたcssを参照してください:-

.menu_container{
position: absolute;
float: left;
width: 270px;
margin-top: 220px; 

}
.main_menu ul { 
padding: 0px; 
margin:0px;
list-style-type: none;  
}
.main_menu ul li {
font-family:Arial, Helvetica, sans-serif; 
font-size:11px; 
letter-spacing:4px;
text-align:right; 
line-height:35px;  
list-style-type:none;
}
.main_menu ul li a  {
padding-right: 25px;  
text-decoration:none; 
font-weight:bold; 
color:#999; 
   display:inline-block;
} 
.main_menu ul li a.selected {
color: #bc4c9b;
font-weight:bold; 
background: url(http://i.imgur.com/TXNfW.gif) right center no-repeat;
}   
.main_menu ul li a:hover {
text-decoration:none;  
color: #595959;  
font-weight:bold;  
background:url(http://i.imgur.com/5Ic6o.gif) right center no-repeat;
}

デモを参照してください:- http://jsbin.com/agavid/13/edit

于 2012-04-23T05:33:49.200 に答える
0

ねえ、私はあなたが与えることができると思います

アンカータグdisplay: inline-block;または与えるline-height

このように

.main_menu ul li a{
display:inline-block;
line-height:35px;  
}
于 2012-04-23T05:00:32.117 に答える