javascript – 我使用MDL获得2个滚动条,我该如何解决?
作者:互联网
我正在使用谷歌的mdl获得2个滚动条.我在下面添加了我的HTML.我怎样才能解决这个问题?
View code on codepen
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--8-col mdl-cell--8-col-desktop mdl-cell--12-col-tablet mdl-cell--12-col-phone">
<div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
<div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone"></div>
</div>
</div>
解决方法:
您的codepen存在许多问题.
多种布局
由于某些原因,您的codepen中似乎有一个额外的布局.我假设这是一个复制粘贴错误.
嵌套网格
使用嵌套网格时,请确保内部网格既是mdl-cell又是mdl-grid,否则内部网格不会作为网格.所以,在你的片段中:
<div class="mdl-grid">
<div class="mdl-cell mdl-grid mdl-cell--8-col mdl-cell--8-col-desktop mdl-cell--12-col-tablet mdl-cell--12-col-phone">
<div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
<div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
</div>
<div class="mdl-cell mdl-grid mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone"></div>
</div>
菜单按钮位置
菜单按钮位于卡片外部和网格内部,而不是单元格.这导致溢出和定位问题,直到菜单被触发.将它们移到卡片内部(我假设你想要它们)可以解决这个问题.
重复的ID
您对所有菜单按钮使用相同的ID,这导致单击以触发所有菜单.
缺少菜单项中的类
您在某些菜单项中缺少某些课程.
我在this codepen为你解决了所有这些问题.
标签:javascript,css,material-design,html,material-design-lite 来源: https://codeday.me/bug/20190609/1203343.html