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>

滑块元素的容量不会超过100％

1 个答案: