滑塊元素不會超過容器寬度的100％

Question

我有一個容器，並且我想要水平滾動的內容。它是動態生成的，所以我無法確切知道內容會有多寬。

所以問題是，我應用於內容的造型（背景，邊框等）隻影響最初可見的區域。向右滾動時，任何進入視圖的其他內容缺少樣式。這是因爲它們所應用的元素具有容器寬度的100％，但其包含的內容超出了其限制。

這是我的意思的例子：fiddle

.wrapper { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px black solid; 
 
    overflow-x: scroll; 
 
} 
 

 
.slider { 
 
    position: relative; 
 
    height: 100%; 
 
    background: white; 
 
} 
 

 
.line { 
 
    height: 20px; 
 
    white-space: nowrap; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
.line-item { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 30px; 
 
}

<div class="wrapper"> 
 
    <div class="slider"> 
 
    <div class="line"> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
    </div> 
 
    </div> 
 
</div>

在這個例子中，.line內容延伸過去.line，所以當然不應用邊框和背景。我怎樣才能讓邊框和背景延伸到.line的全部內容？如何獲得.line寬度超過100％？

Answer 1

充分利用slider顯示作爲嵌入塊

.wrapper { 
 
    position:relative; 
 
    width:100px; 
 
    height:100px; 
 
    border: 1px black solid; 
 
    overflow-x:scroll; 
 
} 
 
.slider { 
 
    display: inline-block;  /* added */ 
 
    position:relative; 
 
    height:100%; 
 
    background:white; 
 
} 
 
.line { 
 
    height:20px; 
 
    white-space:nowrap; 
 
    border-bottom:1px solid black; 
 
} 
 
.line-item { 
 
    position:relative; 
 
    display:inline-block; 
 
    width:30px; 
 
}

<div class="wrapper"> 
 
    <div class="slider"> 
 
    <div class="line"> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
     <div class="line-item">item</div> 
 
    </div> 
 
    </div> 
 
</div>