Zahlen erscheinen immer wieder

Question

Aus irgendeinem unbekannten Grund erscheinen auf der Seite meines Div. Ich habe alles versucht, um diese Zahlen zu entfernen, aber ich habe absolut keine Ahnung, woher sie kommen. Ich weiß, dass es entweder mit dem Stylesheet oder der HTML-Datei zu tun hat. Ich habe das Bild unten zur Verfügung gestellt.

Auch „Vitalynx“ ist den ganzen Weg nach rechts verschoben, und ich kann es nicht .. in der div mit margin-Verschiebung nach links zurück Irgendwelche Ideen? Hilfe wäre sehr willkommen!

leaderboard

Hier ist der HTML-Code:

<div id="ld"> 
    <div class="leaderboard"> 
    <h1> 
    Most active Players 
    </h1> 
    <ol> 
<?= $fgmembersite->User1(); ?> 
<?= $fgmembersite->User10(); ?> 
    </ol> 
</div> 
</div> 
<br><br> 

Hier ist die CSS:

/*-------------------- 
Leaderboard 
--------------------*/ 
.ld h1 { 
    z-index: 0; 
    margin-top: -20px; 
    margin: -20px -5px 4px; 
    line-height: 40px; 
    text-shadow: 2px 1px 3px rgba(0,0,0,0.3); 
    font-weight: bold; 
    font: 23px "Lucida Grande", Tahoma, Verdana, sans-serif; 
    color: white; 
    text-align: center; 
    background: #12a7ee; 
    border-bottom: 0px solid #cfcfcf; 
    border-radius: 5px 5px; 
    -webkit-box-shadow: 3px 1px whitesmoke; 
    border-left:solid 0px #2ab7ec; 
    margin-left: 0px; 
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0, rgb(44,160,202)), 
    color-stop(1, rgb(62,184,229)) 
    ); 
    border-radius: 6px; 
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999; 
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; 
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; 
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999; 
} 


.leaderboard *, 
.leaderboard *::before, 
.leaderboard *::after { 
    box-sizing: border-box; 
} 
.leaderboard { 
    position: relative; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, 5%); 
    width: 245px; 
    height: 335px; 
    background-color: white; 
    background-color: #white; 
    border-radius: 10px; 
    box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3); 
} 
.leaderboard h1 { 
    margin: -20px -2.8px 5px; 
    line-height: 40px; 
    text-shadow: 2px 1px 3px rgba(0,0,0,0.3); 
    font-weight: bold; 
    font: 23px "Lucida Grande", Tahoma, Verdana, sans-serif; 
    color: #fff; 
    text-align: center; 
    background: #12a7ee; 
    border-bottom: 0px solid #cfcfcf; 
    border-radius: 5px 5px; 
    -webkit-box-shadow: 3px 1px whitesmoke; 
    border-left:solid 0px #2ab7ec; 
    margin-left: -17.7px; 
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0, rgb(44,160,202)), 
    color-stop(1, rgb(62,184,229)) 
    ); 
    border-radius: 6px; 
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999; 
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; 
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; 
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999; 
    margin-left: -3px; 
    z-index: 0; 
    font-size: 18px; 
    color: #fffff; 
    padding: 12px 13px 15px; 
} 
.leaderboard h1 svg { 

    width: 25px; 
    height: 26px; 
    position: relative; 
    top: 3px; 
    margin-left: -30px; 
    vertical-align: baseline; 

} 
.leaderboard ol li { 
    margin-left: -22px; 
    position: relative; 
    z-index: 1; 
    font-size: 14px; 
    counter-increment: leaderboard; 
    padding: 18px 0px 23px 245px; 
    cursor: pointer; 
    -webkit-backface-visibility: hidden; 
      backface-visibility: hidden; 
    -webkit-transform: translateZ(0) scale(1, 1); 
      transform: translateZ(0) scale(1, 1); 
} 
.leaderboard ol li::before { 
    position: absolute; 
    z-index: 2; 
    top: 15px; 
    left: 15px; 
    width: 20px; 
    height: 20px; 
    line-height: 20px; 
    color: #2b70ab; 
    background: #fff; 
    border-radius: 20px; 
    text-align: center; 
} 


.leaderboard ol li mark { 
    position: absolute; 
    text-shadow: 1px 3px 3px rgba(0,0,0,0.3); 
    z-index: 2; 
    top: 0; 
    left: -4px; 
    width: 100%; 
    height: 100%; 
    padding: 18px 10px 18px 50px; 
    margin: 0; 
    background: none; 
    color: #fff; 
} 
.leaderboard ol li mark::before, .leaderboard ol li mark::after { 
    position: absolute; 
    z-index: 1; 
    bottom: -11px; 
    left: -9px; 
    border-top: 10px solid #563689; 
    border-left: 10px solid transparent; 
    -webkit-transition: all .1s ease-in-out; 
    transition: all .1s ease-in-out; 
    opacity: 0; 
} 
.leaderboard ol li mark::after { 
    left: auto; 
    right: -9px; 
    border-left: none; 
    border-right: 10px solid transparent; 
} 

#d { 
    text-decoration: underline; 
} 

#e { 
    margin-left: -40px; 
    color: #fff; 
    text-shadow: 1px 3px 3px rgba(0,0,0,0.2); 
} 

.leaderboard ol li small { 
    position: relative; 
    text-shadow: 1px 3px 3px rgba(0,0,0,0.8); 
    font-size: 13px; 
    margin-left: -34px; 
    z-index: 2; 
    display: block; 
    color: #05eccc; 
} 
.leaderboard ol li::after { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08); 
    -webkit-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
    opacity: 0; 
} 
.leaderboard ol li:nth-child(1) { 
    background: #82d1a1; 
} 
.leaderboard ol li:nth-child(1)::after { 
    background: #ac918e; 
} 
.leaderboard ol li:nth-child(2) { 
    background: #1bb288; 
} 
.leaderboard ol li:nth-child(2)::after { 
    background: #b79a98; 
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); 
} 
.leaderboard ol li:nth-child(2) mark::before, .leaderboard ol li:nth-child(2) mark::after { 
    border-top: 6px solid #ba4741; 
    bottom: -7px; 
} 
.leaderboard ol li:nth-child(3) { 
    background: #119c75; 
} 
.leaderboard ol li:nth-child(3)::after { 
    /* background: #d7514d; */ 
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.11); 
} 
.leaderboard ol li:nth-child(3) mark::before, .leaderboard ol li:nth-child(3) mark::after { 
    bottom: -3px; 
} 
.leaderboard ol li:nth-child(4) { 
    background: #108363; 
} 
.leaderboard ol li:nth-child(4)::after { 
    background: #cd4b4b; 
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); 
} 
.leaderboard ol li:nth-child(4) mark::before, .leaderboard ol li:nth-child(4) mark::after { 
    top: -7px; 
    bottom: auto; 
    border-top: none; 
    border-bottom: 6px; 
} 
.leaderboard ol li:nth-child(5) { 
    background: #0c7558; 
    border-radius: 0 0 10px 10px; 
} 
.leaderboard ol li:nth-child(5)::after { 
    background: #c24448; 
    margin-top: -20px; 
    margin: -21px -16.8px 5px; 
    line-height: 40px; 
    text-shadow: 2px 1px 3px rgba(0,0,0,0.3); 
    font-weight: bold; 
    font: 23px "Lucida Grande", Tahoma, Verdana, sans-serif; 
    color: #fff; 
    text-align: center; 
    background: #12a7ee; 
    border-bottom: 0px solid #cfcfcf; 
    border-radius: 5px 5px; 
    -webkit-box-shadow: 3px 1px whitesmoke; 
    border-left:solid 0px #2ab7ec; 
    margin-left: -17.7px; 
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
    background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0, rgb(44,160,202)), 
    color-stop(1, rgb(62,184,229)) 
    ); 
    border-radius: 6px; 
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999; 
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; 
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; 
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999; 
} 

.leaderboard ol li:nth-child(5) mark::before, .leaderboard ol li:nth-child(5) mark::after { 
    top: -9px; 
    bottom: auto; 
    border-top: none; 
    border-bottom: 8px; 
} 
.leaderboard ol li:hover { 
    z-index: 2; 
    overflow: visible; 
} 
.leaderboard ol li:hover::after { 
    opacity: 1; 
    -webkit-transform: scaleX(1.06) scaleY(1.03); 
      transform: scaleX(1.06) scaleY(1.03); 
} 
.leaderboard ol li:hover mark::before, .leaderboard ol li:hover mark::after { 
    opacity: 1; 
    -webkit-transition: all .35s ease-in-out; 
    transition: all .35s ease-in-out; 
} 

Answer 1

<ol> ist der Tag für eine Sortierte Liste, und so wird standardmäßig Zahlen haben. Wenn Sie sie entfernen möchten, gehen Sie wie folgt vor:

ol { 
    list-style-type:none; 
} 

In Bezug auf Ihre Ausrichtung Problem, es scheint, dass der rechten Spalte Text ist linksbündig. Ich würde vorschlagen, diesen Text rechtsbündig auszurichten, und der Container müsste auf der rechten Seite positioniert werden. Basierend auf Ihrer Struktur würden mögliche Lösungen entweder position: absolute; right: 5px; für das Textelement verwenden und dann position: relative für das übergeordnete Element oder Sie könnten float: right; verwenden, obwohl ich diese Methode nur empfehlen würde, wenn Sie damit vertraut sind, wie float funktioniert Allgemeines.

Ihre CSS ist viel zu lange an dieser Stelle für mich für eine genaue Antwort Graben durch zu starten. Erwäge, es zu beschneiden oder nur die relevanten Blöcke zu posten, und ich kann es genauer betrachten.

Wenn ich raten müsste, würde ich davon ausgehen, das der Block Sie die rechte Spalte zu platzieren verwenden:

.leaderboard ol li { 
    ... 
    margin-left: -22px; 
    padding: 18px 0px 23px 245px; 
    ... 
} 

Sie ziehen den Text links von 245px Polsterung verwendet, die a sehr "zusammengeworfen" Methode, um zu erreichen, was Sie wollen. Ich würde anfangen, indem ich die zu 0px ändere und ein text-align: right; hinzufüge und vorwärts von dort fortbewegt.

Answer 2

ändern <ol>-<ul> und diesen Stil hinzufügen

ul li{list-style:none}