CSS水平滾動：行樣式問題

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>

我會提供一個更新很快，動態調整寬度