Question

我试图找出为什么我的a：选定类的背景图像被切割为底部和顶部。我曾尝试将height:!important;和min-height;分配给.main_menu ul li和.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;
}

Answer 1

尝试重写以下规则：

.main_menu ul li a  {
    padding-right: 25px;  
    text-decoration:none;  
    color:#999; 
    display:block;
}

Answer 2

嘿，我认为你可以给予

锚标记display: inline-block;或提供给line-height

就像这样

.main_menu ul li a{
display:inline-block;
line-height:35px;  
}

Answer 3

您的背景附加到锚标记（.main_menu ul li a），因此在font-size之后调整大小。要查看整个背景文件，您需要使锚元素阻止，或者您可以使用填充。使用：

display: inline-block;

或

display: block;

或使用填充.main_menu ul li a

Answer 4

您只需要在 li a 中定义 display：inline-block; ，查看更新的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

背景图像高度切割

4 个答案: