使div在动画上显示为一行

Question

我有一个页脚div，其中的子div需要水平移动。这可以正常工作，但是我需要将所有div放在一行中，而不是将div断开。根据数据库查询结果，类别为img1的div的数量可以是无限的。我对CSS的了解不多。请帮助我。

.footer
{
    background-color:grey;
    overflow:hidden;
    width:100%;
    float:left;
    padding:1%;
    margin-top:2%;
}
.container
{
   padding:1%; 
   width:90%;
   overflow:hidden;  

}
.marquee{
  display:block;
  position:relative;
  width:100%;
  padding:1%;
  animation:scroll 10s linear infinite;
  padding:2%;
}
.marquee:hover {
  animation-play-state: paused
}

.img1 {
  width:15%;
  padding:1%;
  background-color:#f6f6f6;
  margin:1%;
  float:left;
}

/* Make it move */
@keyframes scroll{
  0% {left:100%;}
  100% {left:-100%;}
}

<div class="footer">
    <div class="row">
      <div class="container">
        <div class="marquee">
          <div class="img1">Winner 1</div>  
          <div class="img1">Winner 2</div> 
          <div class="img1">Winner 3</div> 
          <div class="img1">Winner 4</div>
          <div class="img1">Winner 5</div>
          <div class="img1">Winner 6</div>
        </div>
      </div>
   </div>
</div>
<div class="clear"></div>

Answer 1

我已经完成了这样的工作，希望下面是我的示例代码

.footer {
  background-color: grey;
  overflow: hidden;
  width: 100%;
  float: left;
  padding: 1%;
  margin-top: 2%;
}

.container {
  padding: 1%;
  width: 90%;
  overflow: hidden;
}

.marquee {
  display:-ms-flexbox;/* For IE*/
  display:flex;
  position: relative;
  width: 100%;
  animation: scroll 10s linear infinite;
  padding: 2%;
}

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

.img1 {
  padding: 1% 5%;
  background-color: #f6f6f6;
  margin: 1%;
  float: left;
}


/* Make it move */

@keyframes scroll {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}

<div class="footer">
  <div class="row">
    <div class="container">
      <div class="marquee">
        <div class="img1">Winner 1</div>
        <div class="img1">Winner 2</div>
        <div class="img1">Winner 3</div>
        <div class="img1">Winner 4</div>
        <div class="img1">Winner 5</div>
        <div class="img1">Winner 6</div>
      </div>
    </div>
  </div>
</div>
<div class="clear"></div>