並排對齊圖像

Question

如何像CSS Sprite一樣並排對齊圖像

 <style>
.a, .mail-green, .star{ display: block; background: url('http://css.spritegen.com//uploads/ka3dublic7f3p1363fcj1lpei1.png') no-repeat; }
.a { background-position: -0px -0px; width: 103px; height: 30px; }
.mail-green { background-position: -0px -30px; width: 159px; height: 30px; }
.star { background-position: -0px -60px; width: 198px; height: 28px; }
</style>
<div class="a"/>
<div class="main-green"/>
<div class="star"/>

Answer 1

您的HTML無效...

<div class="a"/>

應該

<div class="a"></div>

並且當block元素占據一行時，它們不會全部並排出現.....您應該考慮使用inline-block或float div元素並應用width

我在這里使用inline-block創建了一個示例，但實際上不確定您想要的輸出是什么，因此可能不正確。

以下是 display屬性的規范 ，包括其有效值。 這是一篇關於CSS Floats的好文章