背景图像高度切

Question

我试图找出为什么我的a：选择类的背景图像被切割底部和顶部。从来就试图分配height:!important;和min-height;到.main_menu ul li和.main_menu ul li a.selected，但似乎像别的东西限制了背景图像尺寸（17x21px）

我想提供的图像，但由于I'm新他们不需额外让我对于任何建议这样做:( 的图像是一个圆，it's被切片的底部和顶部，只是因为它是适应一个小容器

Here's代码，谢谢！

.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

嘿，我想你可以给

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

像这样

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

Answer 2

尝试和重写以下规则：

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

Answer 3

你的后台连接到一个锚标记（.main_menu ul li a），并因此在font-size之后进行大小设置。要查看整个背景文件，您需要使锚元素阻塞或者可以使用填充。 用途：

display: inline-block; 

或

display: block; 

或使用填充了.main_menu UL李一

Answer 4

你只需要定义显示：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