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/

Css UL LI对齐图像

1 个答案: