數字不斷顯示

由於某些未知原因，數字一直顯示在我的div一側。我已經嘗試過去除這些數字，但我絕對不知道它們從哪裏出現。我知道它與樣式表或html文件有關。我提供了下面的圖片。數字不斷顯示

另外，「Vitalynx」一直向右移動，我無法將其移回到div的左邊緣。任何想法？幫助將非常感謝！

這裏的html代碼：

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

這裏的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; 
}

來源

2016-10-03 Vitalynx

在您發佈的CSS牆中，您是否有任何規則從您正在使用的有序列表中刪除數字？ – j08691

<ol>是已訂購清單的標籤，所以默認情況下它將包含數字。如果您想將其刪除，請執行下列操作：

ol { 
    list-style-type:none; 
}

在問候你的對齊問題，看來你的右列文本左對齊。我建議將該文本右對齊，並且容器必須位於右側。根據您的結構，可能的解決方案要麼是文本元素使用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;並從那裏向前移動。

來源

2016-10-03 20:25:35 Santi

似乎是一個非常合乎邏輯的解決方案，但是我試過了，它仍然顯示了數字（在IE中）。我也試過：「ol * { list-style-type：none; } 」仍然是相同的結果 – Vitalynx

https://jsfiddle.net/ywu0msf7/ - 我只是在IE11中試過，它工作正常。嘗試做'list-style-type：none！important;'，也許有什麼東西在與你搏鬥。 – Santi

'.leaderboard *， .leaderboard * :: before， .leaderboard * :: after { box-sizing：border-box; list-style-type：none; }「'這似乎修復了它。謝謝你的幫助！ – Vitalynx

變化<ol>到<ul>，並添加這種風格

ul li{list-style:none}

來源

2016-10-03 20:19:05 Besi

數字不斷顯示

回答

相關問題