我一直在尝试让此滚动条代码在Blogger上运行,但还无法弄清楚该怎么做。有人可以查看他们是否能够弄清楚问题是什么以及如何解决。
相同的代码,外观和行为都不同,
Jsfiddle:
https://jsfiddle.net/xuc92tt3/
Screenshot
与
Blogger:
https://debugscroll.blogspot.com/
Screenshot
另外,在div块下方也不应有水平线。
<style>
.test {
width: 266px;
height: 175px;
padding: 0;
margin: 0;
overflow: auto;
background: #000;
list-style: none;
text-align: left;
}
.test li {
padding-bottom: 20px;
}
.test li:last-of-type {
padding: 0;
}
h2 {
margin: 0;
line-height: 1;
font-size: 25px;
color: #00f;
}
.test a:link {
width: 243px;
height: 20px;
display: block;
background: green;
}
.test a:visited {
background: #f00;
color: #000000;
}
.test a:hover {
color: #000;
}
</style>
<ul class="test ">
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
<li>
<h2>Text</h2>
<a href="#" target="blank"></a>
</li>
</ul>
最佳答案
看起来在blogspot示例中,您的<li>
元素正在从页面标题部分中声明的全局样式继承15px填充。
尝试使用以下CSS覆盖它:
.test li {
padding-bottom: 20px;
padding-left: 0;
padding-right: 0;
}
关于html - 调试在Blogger上无法正常工作的滚动条代码,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47296362/