滾動顯示時，如何設置與父母相同的分隔寬度？

Question

Demo

的Html

當垂直滾動顯示，也水平滾動顯示並div元素仍較寬然後DIV容器。 Screen

.scroll { 
    overflow-y: auto; 
    background: #CCC; 
    display: inline-block; 
    height: 150px; 
} 

.element { 
    background: #CD8115; 
} 

的CSS

<div class="scroll"> 
    <div class="list"> 
    <div class="element">111111111111111111111</div> 
    <div class="element">22</div> 
    ... 
    </div> 
</div> 

Answer 1

設定值顯示列表CSS類：繼承。這將使孩子跨越整個寬度。

.list{ 
display: inherit; 
} 

.scroll { 
 
    overflow-y: auto; 
 
    background: #CCC; 
 
    display: inline-block; 
 
    height: 150px; 
 
} 
 
.list{ 
 
    display: inherit; 
 
} 
 
.element { 
 
    background: #CD8115; 
 
}

<h2>With scroll</h2> 
 
<div class="scroll"> 
 
    <div class="list"> 
 
    <div class="element">111111111111111111111</div> 
 
    <div class="element">22</div> 
 
    <div class="element">333333333</div> 
 
    <div class="element">4444</div> 
 
    <div class="element">5555555</div> 
 
    <div class="element">66</div> 
 
    <div class="element">777</div> 
 
    <div class="element">8888</div> 
 
    <div class="element">99999</div> 
 
    <div class="element">0</div> 
 
    </div> 
 
</div> 
 

 
<!-- Absolt same, exept height: auto--> 
 
<h2>Without scroll</h2> 
 
<div class="scroll" style="height: auto;"> 
 
    <div class="list"> 
 
    <div class="element">111111111111111111111</div> 
 
    <div class="element">22</div> 
 
    <div class="element">333333333</div> 
 
    <div class="element">4444</div> 
 
    <div class="element">5555555</div> 
 
    <div class="element">66</div> 
 
    <div class="element">777</div> 
 
    <div class="element">8888</div> 
 
    <div class="element">99999</div> 
 
    <div class="element">0</div> 
 
    </div> 
 
</div>