背景图像高度切

我试图找出为什么我的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; 
}

来源

2012-04-23 eliana

如果你把jsfiddle.net整个事情，这将是很容易遇到这将是很好真正的问题 – Jack 2012-04-23 05:09:04

嗨，我试过CSS验证器，我也试试这个，谢谢！ – eliana 2012-04-23 13:30:20

嘿，我想你可以给

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

像这样

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

来源

2012-04-23 05:00:32

是的，它可以在'.main_menu ul li a'或'.main_menu ul li a.selected'上添加display属性。感谢:) – eliana 2012-04-23 13:46:09

尝试和重写以下规则：

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

来源

2012-04-23 05:00:58 N1ck

是的，它的工作。显示：块;'和'显示：内联块;'谢谢:) – eliana 2012-04-23 13:40:46

@eliana你可以正式[接受]（http://meta.stackexchange.com/问题/ 5234 /如何接受答案）答案。这是一个既定的（也是很好的），在这里感谢SO。 :) – N1ck 2012-05-18 02:00:32

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

display: inline-block;

或

display: block;

或使用填充了.main_menu UL李一

来源

2012-04-23 05:12:58 ruuter

是的，你是对的。 'display：inline-block'解决了这个问题。谢谢！ :) – eliana 2012-04-23 13:32:45

你应该选择一个答案作为接受！ – ruuter 2013-03-19 02:01:45

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

来源

2012-04-23 05:33:49

感谢您的回答，这正是缺少的东西:) – eliana 2012-04-23 13:34:11

背景图像高度切

回答

相关问题