滑块元素不会占用超过 100% 的容器宽度

Question

我有一个容器，以及我想要水平滚动的内容。它是动态生成的，所以我无法确切知道内容的范围。

所以问题是我应用于内容的样式(背景、边框等(只会影响最初可见的区域。向右滚动时，进入视图的任何其他内容都缺少样式。这是因为应用它们的元素具有容器宽度的 100%，但它们包含的内容超出了其限制。

这是我的意思的一个例子：小提琴

.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>