我怎样才能使最后一个div不会在悬停时流入下一行

Question

我想这样做，这样当我悬停在第 11 个div 上时，ID 为 #watching-margin 的div 不会被推到下一行div。相反，我希望它能够不间断地向右移动，并且可能只是隐藏部分 id #watching 边距以保持流畅。谢谢！

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

<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>

Answer 1

一个想法是切换到inline-block元素而不是 float 并在容器上使用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>