数字は引き続き表示されます

Question

未知の理由により、数値は自分のdivの横に表示され続けます。私はこれらの数字を削除するためにすべてを試しましたが、どこから出てくるのか全く分かりません。私はそれがスタイルシートかhtmlファイルのいずれかと関係していることを知っています。私は以下のイメージを提供しました。

また、「Vitalynx」は右端にシフトしていますが、余白を残してdivに戻すことはできません。助けていただければ幸いです！ここで

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

は、CSSです：ここで

leaderboard

はhtmlコードです <ul>へ

/*-------------------- 
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>は、の注文リストのためのタグであり、デフォルトでは番号が付いています。それらを削除したい場合は、以下を実行してください：

整列の問題に関しては、右の列のテキストが左揃えになっているようです。私はそのテキストを右揃えにすることを提案し、コンテナは右側に沿って配置する必要があります。あなたの構造に基づいて、潜在的な解決策は、テキスト要素にposition: absolute; right: 5px;を使用していて、親のまたはのposition: relativeを使用するとfloat: right;を使用できますが、floatの仕組みに精通している方一般的です。

あなたのCSSは、私が正確な答えを探し始めるにはあまりにも長すぎます。それをトリミングするか、関連するブロックのみを投稿することを検討し、より良い見通しを立てることができます。

私は推測していた場合、私は、これはあなたが右の列配置するために使用しているブロックであると仮定したい：

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

あなたはパディングを使用して245pxによって残されたテキストを移動している、ありますあなたが望むものを達成するための非常に「一緒に投げ込まれた」方法。 245pxを0pxに変更し、text-align: right;を追加してそこから進んでいくことから始めます。

Answer 2

変更<ol>と、このスタイルを追加

ul li{list-style:none}