Html Div内联对齐

我正在开发一个简单的图像滑块，它有一个固定宽度的主容器，然后是另一个用于控制滑块移动的div。 它工作得很好，但我想将div（与

幻灯片

类一起）彼此对齐，溢出的div应该移到一边，而不是“掉下来”

我在容器上使用了

overflow:hidden

属性，认为它应该可以工作，溢出的div应该在侧面，但由于某种原因，它们一直在下降。 这是我的钢笔：

他们认为jQuery代码与当前问题无关，所以忽略它。

---

我将感谢任何帮助

您需要在具有

溢出：隐藏

的元素上添加

空白：nowrap

，以防止其内容环绕到下一行

overflow:hidden

只会抑制容器外部部分的显示，但不会阻止内容环绕

$（文档）.ready（函数（）{
var指数=数学地板（$（“.slide”）.长度/2）；
$（'.slide'）.eq（index）.addClass（“焦点”）；
$（“#右”）。单击（函数（）{
$（'.slide'）.eq（index）.removeClass（“焦点”）；
索引--；
$（'.slide'）.eq（index）.addClass（“焦点”）；
$（“#滑动”）.css({
左：$（“#滑动”）.position（）.左-144+“px”
});
});
$（“#左”）。单击（函数（）{
$（'.slide'）.eq（index）.removeClass（“焦点”）；
索引++；
$（'.slide'）.eq（index）.addClass（“焦点”）；
$（“#滑动”）.css({
左：$（“#滑动”）.position（）.左+144+“px”
});
});
});
*{
保证金：0；
填充：0；
}
.滑块{
文本对齐：居中；
方向：rtl；
宽度：1000px；
边框：2倍实心；
高度：160px；
位置：相对位置；
保证金：0自动；
溢出：隐藏；
空白：nowrap；
}
#滑动{
位置：相对位置；
保证金：0；
左：0；
过渡：所有0.5s线性；
}
.幻灯片{
过渡期：所有0.6秒缓解；
边框：1px实心；
边界半径：50%；
宽度：120px；
高度：120px；
利润率：8px；
背景重复：无重复；
背景职位：50%；
显示：内联块；
背景：url(http://i.imgur.com/heDRFUE.jpg);
盒影：0.08像素rgba（0,0,0,8）；
-webkit过滤器：亮度（50%）；
-webkit盒阴影：0 0 8px rgba（0,0,0,8）；
-moz盒阴影：08pxrgba（0,0,0,8）；
}
.焦点{
-webkit过滤器：亮度（110%）；
转换：比例（1.2）；
z指数：10；
位置：相对位置；
}



向右滑动
向左滑动
如果将宽度和浮动属性添加到#滑动中会怎么样

你可能需要在这里或那里做一些额外的css更改。但这只带来了一条线上的圆圈

第二个选项是添加空白：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;
}

在这里，您可以找到有关空白属性的更多信息：

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