css - 图像的 Css UL LI 对齐

Question

我有这个 html 代码：

<ul id="top-bar">
    <li class="top-icon-block"><img src="images/home.png"></li>
    <li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
    <li class="top-icon-block"><img src="images/home.png"></li>
</ul>

相关的 CSS 如下所示：

    #top-bar {
width: inherit;
height: 40px;
padding: 0px;
margin: 0px;
vertical-align: middle;
display: table-row;
}

.top-icon-block {
    width: 50px;
margin: 0px;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}

li.top-icon-block img {
padding-top: 8px;
vertical-align: middle;
}

.top-icon-sep-block {
width: 4px;
margin: 0px;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}

li.top-icon-sep-block img {
padding-top: 18px;
vertical-align: middle;
}

出于某种原因，所有图像都基于最高填充顶部对齐，而我真的需要它们不同。

这是一个jsfiddle：http: //jsfiddle.net/XWdMP/

Answer 1

如果我正确理解您的问题，那是因为您的元素上的填充不同，但它与较大的填充内联呈现。有效地压低你的其他两个图像。

添加一个隐藏到你的 li 元素的溢出应该可以解决问题并隐藏从图像填充差异中显示的间隙。

#top-bar li {
    overflow: hidden;
}

让我知道这是否可以解决问题。 http://jsfiddle.net/rakkeh/XWdMP/1/