Debuggen eines Bildlaufleistencodes, der auf Blogger nicht ordnungsgemäß funktioniert

Question

Ich habe versucht, diesen Bildlaufleistencode für Blogger zu verwenden, konnte aber nicht herausfinden, wie. Kann jemand sehen, ob sie in der Lage sind herauszufinden, was das Problem ist und wie es gelöst werden kann.

gleichen Code, Beide sehen und anders handeln,

Jsfiddle:

https://jsfiddle.net/xuc92tt3/

Screenshot

gegen

Blogger:

https://debugscroll.blogspot.com/

Screenshot

Auch sollte es nicht entweder eine horizontale Linie unterhalb der div Blöcke sein.

<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>

Answer 1

Sieht aus wie in dem Beispiel Blogspot Ihre <li> Elemente sind in der Seitenkopfteil eine 15px padding von einem globalen Stil erklärt vererben.

Versuchen überschreiben, dass mit dem folgenden CSS:

.test li { 
    padding-bottom: 20px; 
    padding-left: 0; 
    padding-right: 0; 
} 

Answer 2

Dieses CSS-Code

.main-inner .widget ul li { 
    padding: 0; 
    border-top: 0; 
    border-bottom: 0; 
    margin-bottom: 20px; 
} 
.main-inner .widget h2 { 
    margin: 0; 
    padding: 0; 
}