0

最初と最後のインライン ブロック アイテムの高さが上ではなく下にあるのはなぜですか?

実際の例: http://dabblet.com/gist/3526764

HTML

<a href="#" class="slider-previous">previous</a>
<img src="http://lorempixel.com/81/61/city/1" alt="">
<img src="http://lorempixel.com/81/61/city/2" alt="">
<img src="http://lorempixel.com/81/61/city/3" alt="">
<img src="http://lorempixel.com/81/61/city/4" alt="">
<img src="http://lorempixel.com/81/61/city/5" alt="">
<img src="http://lorempixel.com/81/61/city/6" alt="">
<img src="http://lorempixel.com/81/61/city/7" alt="">
<img src="http://lorempixel.com/81/61/city/8" alt="">
<a href="#" class="slider-next">Next</a>

CSS

img {display:inline-block;}
.slider-previous {text-indent:-99999px;background: url(https://www.entropay.com/sites/entropay.com/themes/entropay_c/images/icons/arrow_icon.png) no-repeat #eee;height: 81px;width: 20px;;display:inline-block;}
.slider-next {text-indent:-99999px;background: url(https://www.entropay.com/sites/entropay.com/themes/entropay_c/images/icons/arrow_icon.png) no-repeat #eee;height: 81px;width: 20px;;display:inline-block; }

矢印を画像に合わせて垂直にしたい。margin-topネガティブまたはなしでは不可能floatですか？

4

2 に答える 2

3

これはvertical-align、画像の が定義されていないためです。

追加してみてください

img {
   vertical-align: bottom
}

ダブレットの例: http://dabblet.com/gist/3526905

于 2012-08-30T11:39:35.020 に答える
0 
.slider-previous {text-indent:-99999px;background: url(https://www.entropay.com/sites/entropay.com/themes/entropay_c/images/icons/arrow_icon.png) no-repeat left center #eee;height: 81px;width: 20px;;display:inline-block;vertical-align:top}
.slider-next {text-indent:-99999px;background: url(https://www.entropay.com/sites/entropay.com/themes/entropay_c/images/icons/arrow_icon.png) no-repeat left center #eee;height: 81px;width: 20px;;display:inline-block;vertical-align:top}

トリックを行う必要がありますか？

于 2012-08-30T11:48:52.487 に答える