滚动时不显示样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动时不显示样式相关的知识，希望对你有一定的参考价值。
当我滚动背景并且边框样式不应用于内部div时，我有一个滚动div的问题。
我试图在这里简化问题;
https://jsfiddle.net/w498trmf/22/
.GridScrollOuter {
overflow-x: hidden;
white-space: nowrap;
}
.GridScrollHeader {
overflow-x: auto;
}
.GridHeader {
background-color: #c8ffbb !Important;
color: red;
border-top: 1px solid #337ab7;
border-bottom: 1px solid #337ab7;
}
.Column {
width: 50%;
display: inline-block;
}<div class="GridScrollOuter">
<div class="GridScrollHeader">
<div class="GridHeader">
<div class="Column">
<button>Button1</button>
</div>
<div class="Column">
<button>Button2</button>
</div>
<div class="Column">
<button>Button3</button>
</div>
</div>
</div>
</div>答案
这是因为你有
.Column {
width: 50%;
display: inline-block;
}
三个divs，宽度为50％，因此宽度为150％。而.GridHeader只是100% width。
试试这个：让你的.GridHeader宽150％
.GridHeader {
background-color: #c8ffbb !Important;
color: red;
border-top: 1px solid #337ab7;
border-bottom: 1px solid #337ab7;
width: 150%;
}
和你的.Column 33％宽度：
.Column {
width: 33%;
display: inline-block;
}
或者，如果你总是有不同数量的divs，那么忘记width并将这些类添加到.GridHeader：
.GridHeader {
display: flex;
justify-content: space-between;
}
这是非常数内部div的代码片段。
.GridScrollOuter {
overflow-x: hidden;
white-space: nowrap;
}
.GridScrollHeader {
/*background-color: #c8ffbb !Important;
border-top: 1px solid #337ab7;
border-bottom: 1px solid #337ab7;*/
overflow-x: auto;
}
.GridHeader {
background-color: #c8ffbb !Important;
color: red;
border-top: 1px solid #337ab7;
border-bottom: 1px solid #337ab7;
width: 150%;
display: flex;
justify-content: space-between;
}<div class="GridScrollOuter">
<div class="GridScrollHeader">
<div class="GridHeader">
<div class="Column">
<button>Button1</button>
</div>
<div class="Column">
<button>Button2</button>
</div>
<div class="Column">
<button>Button3</button>
</div>
</div>
</div>
</div>以上是关于滚动时不显示样式的主要内容，如果未能解决你的问题，请参考以下文章