0

私はこの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/

4

1 に答える 1

0

あなたの問題を正しく理解していれば、要素のパディングが異なるためですが、より大きなパディングでインラインでレンダリングされています。他の 2 つのイメージを効果的に押し下げます。

li 要素にオーバーフロー非表示を追加すると、問題が解決され、画像からのパディングの違いから表示されているギャップが非表示になります。

#top-bar li {
    overflow: hidden;
}

問題が解決したかどうかをお知らせください。 http://jsfiddle.net/rakkeh/XWdMP/1/

于 2013-02-12T21:13:53.307 に答える