图像堆叠而不是浮动，因为将它们更改为 css 精灵

Question

我一直在将我网站的很多内容转换为 sprite 以加快速度。一旦我通过 css 将一堆图像切换到字幕中的精灵，它们就不再向左浮动，而是堆叠起来。

它对问题是什么感到困惑。

<p class="microsoft marquee">  <span><a href="hd-tropical-island-beach-paradise-wallpapers.htm"><img class="a1"></img></a>
<a href="hd-garfield-and-friends-comic-desktop-wallpapers.htm"><img class="a2"></img></a>
<a href="the-legend-of-zelda-majora%27s-mask-desktop-wallpapers-3ds.htm"><img class="a3"></img></a>
<a href="hd-disney-frozen-wallpapers-for-mobile-phones-1080x1920.htm"><img class="a4"></img></a>
<a href="hd-penguins-of-madagascar-mobile-wallpapers-1080x1920.htm"><img class="a5"></img></a>
<a href="the-augusta-national-golf-course-wallpapers-hd.htm"><img class="a6"></img></a>
<a href="banjo-kazooie-wallpapers-hd-nuts-and-bolts-and-nintendo-64.htm"><img class="a7"></img></a>
<a href="the-legend-of-zelda-twilight-princess-hd-wallpapers-skyward-sword.htm"><img class="a8"></img></a>
<a href="vw-combi-van-hd-wallpapers-volkswagen-hippie-bus.htm"><img class="a9"></img></a>
<a href="monsters-inc-backgrounds-and-monsters-university-wallpapers-hd.htm"><img class="a10"></img></a>
<a href="awesome-minecraft-hd-desktop-wallpapers-1080p-backgrounds-1920x1080.htm"><img class="a11"></img></a>
<a href="despicable-me-2-hd-wallpapers-for-desktop-1920x1080.htm"><img class="a12"></img></a>
<a href="toy-story-1-2-3-wallpapers-hd-1920x1080-backgrounds.htm"><img class="a13"></img></a>
<a href="the-avengers-wallpapers-for-desktop-1920x1080-movie-backgrounds.htm"><img class="a14"></img></a>
<a href="1920x1080-funny-backgrounds-hilarious-wallpapers-for-desktop.htm"><img class="a15"></img></a></span></p>

.a1, .a2, .a3, .a4, .a5, .a6, .a7, .a9, .a10, .a11, .a12, .a13, .a14, .a15
{width:100px; height:58px;
background-image: url('http://www.techagesite.com/scroll-sprite.png');
  background-repeat: no-repeat;
float: left;}


.a1 {background-position: 0px 0px;}
.a2 {background-position: 0px -64px;}
.a3 {background-position: 0px -128px;}
.a4 {background-position: 0px -186px;}
.a5 {background-position: 0px -244px;}
.a6 {background-position: 0px -302px;}
.a7 {background-position: 0px -366px;}
.a8 {background-position: 0px -424px;}
.a9 {background-position: 0px -482px;}
.a10 {background-position: 0px -540px;}
.a11 {background-position: 0px -598px;}
.a12 {background-position: 0px -656px;}
.a13 {background-position: 0px -714px;}
.a14 {background-position: 0px -772px;}
.a15 {background-position: 0px -830px;}

.marquee {
    width: 235px;

float:left;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px green solid;

}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee 30s linear infinite;

}
.marquee span:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }



.microsoft {
    z-index: 1;
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2em; height: 2em;

}

Answer 1

从代码中删除 float: left;。

查看附加的片段演示。

.a1, .a2, .a3, .a4, .a5, .a6, .a7, .a9, .a10, .a11, .a12, .a13, .a14, .a15
{width:100px; height:58px;
background-image: url('http://www.techagesite.com/scroll-sprite.png');
  background-repeat: no-repeat;
}


.a1 {background-position: 0px 0px;}
.a2 {background-position: 0px -64px;}
.a3 {background-position: 0px -128px;}
.a4 {background-position: 0px -186px;}
.a5 {background-position: 0px -244px;}
.a6 {background-position: 0px -302px;}
.a7 {background-position: 0px -366px;}
.a8 {background-position: 0px -424px;}
.a9 {background-position: 0px -482px;}
.a10 {background-position: 0px -540px;}
.a11 {background-position: 0px -598px;}
.a12 {background-position: 0px -656px;}
.a13 {background-position: 0px -714px;}
.a14 {background-position: 0px -772px;}
.a15 {background-position: 0px -830px;}

.marquee {
    width: 235px;

float:left;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px green solid;

}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee 30s linear infinite;

}
.marquee span:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }



.microsoft {
    z-index: 1;
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2em; height: 2em;

}

<p class="microsoft marquee">  <span><a href="hd-tropical-island-beach-paradise-wallpapers.htm"><img class="a1"></img></a>
<a href="hd-garfield-and-friends-comic-desktop-wallpapers.htm"><img class="a2"></img></a>
<a href="the-legend-of-zelda-majora%27s-mask-desktop-wallpapers-3ds.htm"><img class="a3"></img></a>
<a href="hd-disney-frozen-wallpapers-for-mobile-phones-1080x1920.htm"><img class="a4"></img></a>
<a href="hd-penguins-of-madagascar-mobile-wallpapers-1080x1920.htm"><img class="a5"></img></a>
<a href="the-augusta-national-golf-course-wallpapers-hd.htm"><img class="a6"></img></a>
<a href="banjo-kazooie-wallpapers-hd-nuts-and-bolts-and-nintendo-64.htm"><img class="a7"></img></a>
<a href="the-legend-of-zelda-twilight-princess-hd-wallpapers-skyward-sword.htm"><img class="a8"></img></a>
<a href="vw-combi-van-hd-wallpapers-volkswagen-hippie-bus.htm"><img class="a9"></img></a>
<a href="monsters-inc-backgrounds-and-monsters-university-wallpapers-hd.htm"><img class="a10"></img></a>
<a href="awesome-minecraft-hd-desktop-wallpapers-1080p-backgrounds-1920x1080.htm"><img class="a11"></img></a>
<a href="despicable-me-2-hd-wallpapers-for-desktop-1920x1080.htm"><img class="a12"></img></a>
<a href="toy-story-1-2-3-wallpapers-hd-1920x1080-backgrounds.htm"><img class="a13"></img></a>
<a href="the-avengers-wallpapers-for-desktop-1920x1080-movie-backgrounds.htm"><img class="a14"></img></a>
<a href="1920x1080-funny-backgrounds-hilarious-wallpapers-for-desktop.htm"><img class="a15"></img></a></span></p>

Answer 2

试试这个：

将以下代码添加到您的 CSS

a{
    height:auto;
    overflow:hidden;
    display:inline-block;
}

Working:Demo

或

从（正如@Usman Arshad 所说）

中删除 float:left

.a1, .a2, .a3, .a4, .a5, .a6, .a7, .a9, .a10, .a11, .a12, .a13, .a14, .a15 {
    width:100px;
    height:58px;
    background-image: url('http://www.techagesite.com/scroll-sprite.png'); 
    background-repeat: no-repeat;
}

图像堆叠而不是浮动，因为将它们更改为 css 精灵

Images stacking instead of floating since changing them to an css sprite

html

css

css-sprites

css-float