数字不断显示

由于某些未知原因，数字一直显示在我的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

数字不断显示

回答

相关问题