Question

我试图让下面显示的两个img元素显示内联，以便它们可以随滑块一起移动，但它不会。我是否错过了一些小事，或者工作中有更大的力量，我不确定。

HTML：

<div class="slider-small-box sone slider-box">
    <ul>
        <li>
            <img src="spacer.gif" class="slider-img">
        </li>
        <li>
            <img src="spacer2.gif" class="slider-img">
        </li>
    </ul>
</div>

CSS：

.slider-box {
overflow: hidden;
}
.slider-box ul {
padding: 0px;
margin: 0px;
}
.slider-box > ul > li {
display: inline-block;
border-radius: 5px;
}
.slider-small-box > ul > li > img {
width: 270px;
height: 200px;
background-color: #333333;
border-radius: 5px;
}

这是一个显示所有滑块div及其各自的css类的jsfiddle：http://jsfiddle.net/JeVm3/

编辑：

对于jsfiddle，我觉得需要更多的解释。您会看到，每个彩色div都是单个滑块的视口，因此它们具有固定宽度的原因。每个人都有＆＃34;溢出：隐藏＆＃34;附加以确保无法看到其中的元素，并将滑入视图。

我试图让它成为div.slider-box＆gt; ul＆gt; li元素在视口div.slider-small-box后面显示内联块。

Answer 1

事实上inline-block的工作原理是，如果容器的宽度没有足够的空间，它将跳转到下一行。因此，要强制列表项在一行上，您必须使用white-space，如下所示：

.slider-box ul {
    padding: 0px;
    margin: 0px;
    white-space:nowrap;
}

Answer 2

您的.slider-small-box元素似乎没有足够的宽度用于两个图像。它目前需要至少540px的宽度。

.slider-small-box {
  /* was: width: 270px */
  width: 540px;
  height: 200px;
  background-color: #eeeeee;
  display: inline-block;
  bottom: 0px;
  right: 0px;
  font-size: 0px;
  line-height: 0px;
  float: left;
  overflow: hidden;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.75);
  border-radius: 5px;
}

以下是您更新的小提琴：http://jsfiddle.net/JeVm3/1/

CSS inline-block在滑块列表中不起作用

2 个答案: