我如何才能使它最后一个div不会在悬停时流入下一行？

Question

我想这样做，以便当我将鼠标悬停在第11个div上时，带有id＃watching-margin的div不会被推入下一行div。相反，我喜欢它，以便它可以不间断地向右移动，并且可能只是隐藏了部分id＃watching-margin以保持流畅。谢谢！

＆＃13;

＆＃13;

#section{
  width:100%;
  margin:auto;
  overflow:hidden;
}

.container{
  width:80%;
  margin:auto;
  margin-top:20px;
  text-align:center;
  padding:2px;
}

.watching{
  position:relative;
  width:12%;
  float:left;
  border:1px solid black;
  height:250px;
  background-color:red;
}

.watching img{
  width:100%;
  height:200px;
}

.watching{
  margin-left:-50px;
  transition:.3s ease;
}

.watching:hover{
  margin-right:50px;
  transition:.3s ease;
}

#watching-margin{
  margin-left:-50px;
}

#watching-margin:hover{
  margin-right:0;
  overflow:hidden;
}

＆＃13;

<section id=section>
  <div class="container">
    <div class="watching">
      <div class="img"></div>
    </div>
    <div class="watching">
      <div class="img"></div>
    </div>
    <div class="watching">
      <div class="img"></div>
    </div>
    <div class="watching">
      <div class="img"></div>
    </div>
    <div class="watching">
      <div class="img"></div>
    </div>
    <div class="watching">
      <div class="img"></div>
    </div>
    <div class="watching">
      <div class="img"></div>
    </div>
    <div class="watching">
      <div class="img"></div>
    </div>
    <div class="watching">
      <div class="img"></div>
    </div>
    <div class="watching">
      <div class="img"></div>
    </div>
    <div class="watching">
      <div class="img"></div>
    </div>
    <div class="watching" id="watching-margin">
      <div class="img"></div>
    </div>
    <div class="watching">
      <div class="img"></div>
    </div>
    <div class="watching">
      <div class="img"></div>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

一个想法是切换到white-space:nowrap元素而不是浮点数并在容器上使用#section { width: 100%; margin: auto; overflow: hidden; } .container { width: 80%; margin: auto; margin-top: 20px; text-align: center; padding: 2px; font-size:0; white-space:nowrap; } .watching { position: relative; width: 12%; display: inline-block; border: 1px solid black; height: 250px; background-color: red; font-size:initial; } .watching img { width: 100%; height: 200px; } .watching { margin-left: -50px; transition: .3s ease; } .watching:hover { margin-right: 50px; transition: .3s ease; } #watching-margin { margin-left: -50px; } #watching-margin:hover { margin-right: 0; overflow: hidden; }，以便始终将它们保持在同一行：

  <section id=section>

    <div class="container">

      <div class="watching">
        <div class=img></div>
      </div>
      <div class="watching">
        <div class=img></div>
      </div>
      <div class="watching">
        <div class=img></div>
      </div>
      <div class="watching">
        <div class=img></div>
      </div>
      <div class="watching">
        <div class=img></div>
      </div>
      <div class="watching">
        <div class=img></div>
      </div>
      <div class="watching">
        <div class=img></div>
      </div>
      <div class="watching">
        <div class=img></div>
      </div>
      <div class="watching">
        <div class=img></div>
      </div>
      <div class="watching">
        <div class=img></div>
      </div>
      <div class="watching">
        <div class=img></div>
      </div>
      <div class="watching" id="watching-margin">
        <div class=img></div>
      </div>
      <div class="watching">
        <div class=img></div>
      </div>
      <div class="watching">
        <div class=img></div>
      </div>

    </div>

  </section>

{{1}}