背景圖像高度切

我試圖找出爲什麼我的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

背景圖像高度切

回答

相關問題