Question

我需要在纯html / css中实现按行组织的水平滚动区域。我只需要一个卷轴用于整个区域（每行没有独立滚动）。我已尝试使用以下代码，但问题是行类的边框和背景样式不像溢出内容那样扩展（我希望它们遵循内容的宽度）。知道怎么解决这个问题吗？

*, *:before, *:after {
  box-sizing: border-box;
}

#scrollHorizontalContainer {
  display: block;
  margin: 1em;
  padding: 1em;
  overflow-x: scroll;
  width: 60%;
  background-color: #666;
}

.row {
  display: block;
  height: 100px;
  width: 100%;
  white-space: nowrap;
  border: 1px solid blue;
  background-color: #222;
}

.box {
  margin: 1em;
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: mediumpurple;
  text-align: center;
  border: 1px solid red;
}

<div id="scrollHorizontalContainer">

  <div class="row">
    <div class="box"></div>
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>   
  </div>
  
  
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
  </div>
  
</div>

Answer 1

我希望这会有所帮助;请记住，行的宽度取决于您在那里有多少个盒子所以你可能需要在你有更多的时候改变宽度

*, *:before, *:after {
  box-sizing: border-box;
}

#scrollHorizontalContainer {
  display: block;
  padding: 1em;
  overflow-x: scroll;

  background-color: #666;
}

.row {    
display: block;
height: 100px;
width: 134vw;
white-space: nowrap;
border: 1px solid blue;
background-color: #222;
}

.box {
  margin: 1em;
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: mediumpurple;
  text-align: center;
  border: 1px solid red;
}

<div id="scrollHorizontalContainer">

  <div class="row">
    <div class="box"></div>
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>   
  </div>
  
  
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div>  
 
    <div class="box"></div>  
    <div class="box"></div>  
    <div class="box"></div> 
  </div>
  
</div>

我会尽快提供动态适应宽度的更新

CSS水平滚动：行样式问题

1 个答案: