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內聯塊在滑動列表中不起作用

回答

相關問題