html - Div 内联对齐

Question

我正在开发一个简单的图像 slider ，它有一个固定宽度的主容器，然后是另一个用于控制 slider 移动的 div。它工作正常，但我想将 div(与 slide 类)彼此对齐，溢出的 div 应该移到一边，而不是“掉下来”。

我在容器上使用了 overflow:hidden 属性，认为它应该可以工作，溢出的 div 应该在两侧，但由于某种原因它们不断掉落。这是我的笔: http://codepen.io/anon/pen/xOZVPL

他们的 jQuery 代码与当前问题无关，所以忽略它。如果有任何帮助，我将不胜感激!

Answer 1

如果您将 width 和 float 属性添加到您的#sliding 会怎么样？

#sliding
{
  width: 1200px;
  position: relative;
  margin: 0;
  float: left;
  left: 0;
  transition:all 0.5s linear;
}

您可能需要在这里和那里做一些额外的 css 更改。但这使圆圈在一条线上。

第二个选项是添加 white-space: nowrap; 到你的 .slider 类

.slider {
  white-space: nowrap;
  text-align:center;
  direction: rtl;
  width:1000px;
  border:2px solid;
  height:160px;
  position:relative;
  margin:0 auto;
  overflow:hidden;
}

在这里您可以找到有关空白属性的更多信息:http://www.w3schools.com/cssref/pr_text_white-space.asp