0

我试图弄清楚为什么我的 a:selected 类的背景图像被底部和顶部切割。我尝试将height:!important;and分配min-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

您只需要定义display:inline-block; 在您的li 中查看您更新的 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 回答
0

您的背景附加到锚标记（.main_menu ul li a），因此在字体大小之后调整大小。要查看整个背景文件，您需要将锚元素设置为阻塞，或者您可以使用填充。利用：

display: inline-block;

或者

display: block;

或为 .main_menu ul li a 使用填充

于 2012-04-23T05:12:58.977 回答