列表元素中的CSS對齊精靈

我有這個列表菜單，我想爲每個項目顯示箭頭，所以當您將鼠標懸停在項目上時，箭頭更改顏色。到目前爲止，我的問題似乎是將這個箭頭與文本垂直居中對齊。正如你從屏幕截圖看到的那樣，它稍微偏離了一點。忽略箭頭和超鏈接之間的空白處。列表元素中的CSS對齊精靈

小提琴：http://jsfiddle.net/7xbse/

Screenshot

HTML，

<li ><a class="clear-block" href="http://wordpress.local/archives/category/announcements" title="View all posts filed under Announcements"> 
<span class="tt">Announcements <strong>(1)</strong></span> 
<span class="c1"></span> 
</a></li> 
<li ><a class="clear-block" href="http://wordpress.local/archives/category/c-sharp" title="View all posts filed under C#"> 
<span class="tt">C# <strong>(1)</strong></span> 
<span class="c1"></span> 
</a></li> 
<li class="extends"><a class="clear-block" href="http://wordpress.local/archives/category/c-plus-plus" title="View all posts filed under C++"> 
<span class="tt">C++ <strong>(1)</strong></span> 
<span class="c1"></span> 
</a> 
    <ul class="sub-menu"> 
    <li ><a class="clear-block" href="http://wordpress.local/archives/category/c-plus-plus/multiplexing-io" title="View all posts filed under Multiplexing I/O"> 
<span class="tt">Multiplexing I/O <strong>(1)</strong></span> 
<span class="c1"></span> 
</a></li> 
    </ul> 
</li>

CSS，

.block ul.menu, .block ul.menu ul, .block ul.menu li, .block .box, .block .box .entry{ 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    line-height: normal; 
} 

.block ul.menu li, .block ul.box .entry{ 
    border-bottom:1px dotted #aaa; 
    border-top:1px dotted #fff; 
} 

/* no border on 1st list item */ 
.block ul.menu li.first, 
.block ul.menu li:first-child, 
.block ul.box .entry.first, 
.block ul.box .entry:first-child{border-top:0 !important;} 

.block ul.menu li.last, 
.block ul.menu li:last-child, 
.block ul.box .entry.last, 
.block ul.box .entry:last-child{border-bottom:0 !important;} 

.block ul.menu li .expand{display: none;} 

.block ul.menu li, .block ul.box .entry { 
    position: relative; 
    z-index: 5; 
} 

.block ul.menu li a { 
    background:transparent url(../images/icons_old.png) no-repeat 4px -816px; 
} 

/* titles */ 
.block ul.menu .tt { 
    display:block; 
} 

.block ul.menu a:hover .tt{ 
    text-decoration:underline; 
} 

/* content - primary */ 
.block ul.menu .c1{ 
    display:block; 
    line-height: 150%; 
    color:#333; 
    text-decoration:none; 
} 

/* information block (left side) */ 
.block ul.menu .base { 
    overflow:hidden; 
    display:block; 
}

來源

2012-11-27 nixgadgets

可以請您發佈您的「icons_old.png」或工作jsFiddle文件 –

對不起。它在這裏 - > http://imgur.com/UHZe3。我試着去找一個工作小提琴。 – nixgadgets

我上傳了代碼到小提琴 - > http://jsfiddle.net/7xbse/ – nixgadgets

這是一個沒有考慮到菜單行高度的精靈圖像。所以箭頭沒有對齊。訣竅是修復精靈。

來源

2012-12-20 20:54:19 nixgadgets

而不是使用一個巨大的CSS精靈，爲什麼不保存每個圖像單獨和利用的事實會垂直居中您的圖像？

來源

2012-11-27 05:40:30 Wex

列表元素中的CSS對齊精靈

回答

相關問題