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

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

问题是什么让人困惑

有什么想法吗？

.a1、.a2、.a3、.a4、.a5、.a6、.a7、.a9、.a10、.a11、.a12、.a13、.a14、.a15
{宽度：100px；高度：58px；
背景图像：url（'http://www.techagesite.com/scroll-sprite.png');
背景重复：无重复；
浮动：左；}
.a1{背景位置：0px 0px；}
.a2{背景位置：0px-64px；}
.a3{背景位置：0px-128px；}
.a4{背景位置：0px-186px；}
.a5{背景位置：0px-244px；}
.a6{背景位置：0px-302px；}
.a7{背景位置：0px-366px；}
.a8{背景位置：0px-424px；}
.a9{背景位置：0px-482px；}
.a10{背景位置：0px-540px；}
.a11{背景位置：0px-598px；}
.a12{背景位置：0px-656px；}
.a13{背景位置：0px-714px；}
.a14{背景位置：0px-772px；}
.a15{背景位置：0px-830px；}
马奎尔先生{
宽度：235px；
浮动：左；
保证金：0自动；
空白：nowrap；
溢出：隐藏；
框大小：边框框；
边框：1px绿色实心；
}
.帐篷跨度{
显示：内联块；
左：100%；
文本缩进：0；
动画：字幕30s线性无限；
}
.选框跨度：悬停{
动画播放状态：已暂停
}
/*让它动起来*/
@关键帧选框{
0%{transform:translate（0，0）；}
100%{transform:translate（-100%，0）；}
.微软{
z指数：1；
内容：''；
位置：绝对位置；
顶部：0；左侧：0；
宽度：2米；高度：2米；
}

从代码中删除

浮动：左；

检查附加的代码片段演示

.a1、.a2、.a3、.a4、.a5、.a6、.a7、.a9、.a10、.a11、.a12、.a13、.a14、.a15
{宽度：100px；高度：58px；
背景图像：url（'http://www.techagesite.com/scroll-sprite.png');
背景重复：无重复；
}
.a1{背景位置：0px 0px；}
.a2{背景位置：0px-64px；}
.a3{背景位置：0px-128px；}
.a4{背景位置：0px-186px；}
.a5{背景位置：0px-244px；}
.a6{背景位置：0px-302px；}
.a7{背景位置：0px-366px；}
.a8{背景位置：0px-424px；}
.a9{背景位置：0px-482px；}
.a10{背景位置：0px-540px；}
.a11{背景位置：0px-598px；}
.a12{背景位置：0px-656px；}
.a13{背景位置：0px-714px；}
.a14{背景位置：0px-772px；}
.a15{背景位置：0px-830px；}
马奎尔先生{
宽度：235px；
浮动：左；
保证金：0自动；
空白：nowrap；
溢出：隐藏；
框大小：边框框；
边框：1px绿色实心；
}
.帐篷跨度{
显示：内联块；
左：100%；
文本缩进：0；
动画：字幕30s线性无限；
}
.选框跨度：悬停{
动画播放状态：已暂停
}
/*让它动起来*/
@关键帧选框{
0%{transform:translate（0，0）；}
100%{transform:translate（-100%，0）；}
.微软{
z指数：1；
内容：''；
位置：绝对位置；
顶部：0；左侧：0；
宽度：2米；高度：2米；
}

试试这个：

在CSS中添加以下代码

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

或

从中删除浮动：左（正如@Usman Arshad所说）

---

你想让它水平排列吗？是的。那是在我换成精灵之前。有人有什么想法吗？我在我的页面上试过了，但它不起作用。小提琴不起作用，但我的页面不起作用。我得到的只是一条绿色的边框线，大约一个像素高，移除浮点数时它的指定宽度，选项一的指定宽度大约为10px高ill在字幕中没有显示任何内容。它正常工作了，但现在它右边的div现在在下面。我如何解决这个问题？您有两个。右列1类（在CSS的顶部和底部），重写为一个，并修改了一些行，如removed clear:Tween；还添加了红色边框，只是为了检查您的错误div位置。

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

.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;
}