CSS内联块在滑动列表中不起作用

我试图让下面显示的两个img元素显示为内联，以便它们可以随滑块一起移动，但它不会。无论我是缺少一些小事还是工作中有更大的力量，我都不确定。CSS内联块在滑动列表中不起作用

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需要更多的解释。你会发现，每个彩色divs都是一个单独滑块的视口，因此它们有一个固定的宽度。每个人都有“溢出：隐藏”，以确保其中的元素无法看到，并且会滑入视图。

我试图让div.slider-box> ul> li元素在视口div.slider-small-box后面显示内联块。

来源

2014-05-06 Mallander

我不知道如果我理解你的权利，但'.slider小box'具有固定'宽度'。如果删除它，第二个'img'将与第一个内联。 – Vucko

div.slider-small-box具有固定的270px宽度的原因是它是滑块的视口，宽度为550px的div.slider-large-box也是如此。 – Mallander

其实这就是如何inline-block的作品，如果容器的宽度没有足够的空间，它会跳转到下一行。如此给力的单行列表中的项目，你必须使用white-space这样的：

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

来源

2014-05-06 15:13:16

感谢King King的回复。奇迹般有效！我从来不知道'inline-block'或听说过'空白'之前，你每天都会学到新的东西！ – Mallander

@Mallander不用客气，是的'white-space'在某些情况下非常有用:) –

当然是。我需要花时间来完成这个滑块！ – Mallander

看起来你的.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/

来源

2014-05-06 15:04:34 wiherek

感谢您的快速回复，wiherek。 div.slider-small-box具有固定的270px宽度的原因是它是滑块的视口。我应该在关于完整jsfiddle的问题上解释一下自己。 – Mallander

CSS内联块在滑动列表中不起作用

回答

相关问题