javascript - 为什么此javascript将所有行显示在一起，而不是像演示页中那样一一显示？

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript' src="http://vaakash.github.io/jquery/easy-ticker.js"></script>
<div class="demo3">
        <ul>
            <li>what's causing the layout to break? Attempting to make a horizontal layout website ?</li>
            <li>WordPress Mobify mobile theme, CSS</li>
            <li>Gridview with Table.Rows.Count ==0 to show Footer row that include checkbox with imageurl cast</li>
            <li>JS/jQuery - animated random name picker</li>
        </ul>
    </div>
<style>

.demof{
    border: 1px solid #ccc;
    margin: 25px 0;
}
.demof ul{
    padding: 0;
    list-style: none;
}
.demof li{
    padding: 20px;
    border-bottom: 1px dashed #ccc;
}
.demof li.odd{
    background: #fafafa;
}
.demof li:after {
    content: '';
    display: block;
    clear: both;
}
.demof img{
    float: left;
    width: 100px;
    margin: 5px 15px 0 0;
}
.demof a{
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #06f;
}
.demof p {
    margin: 15px 0 0;
    font-size: 14px;
}

.demo3 {
    font-family: Arial, sans-serif;
    border: 1px solid #C20;
    margin: 50px 0;
    font-style: italic;
    position: relative;
    padding: 0 0 0 80px;
    box-shadow: 0 2px 5px -3px #000;
    border-radius: 3px;
}
.demo3:before {
    content: "Latest News";
    display: inline-block;
    font-style: normal;
    background: #C20;
    padding: 10px;
    color: #FFF;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
}
.demo3:after {
    content: '';
    display: block;
    top: 0;
    left: 80px;
    background: linear-gradient(#FFF, rgba(255, 255, 255, 0));
    height: 20px;
}
.demo3 ul li {
    list-style: none;
    padding: 10px 0;
}
</style>
<script type='text/javascript'>
$(function(){
$('.demo3').easyTicker({
                visible: 1,
        interval: 4000,
                direction: 'up'
});
});
</script>

文字全部向上滚动，但是在LatestNews中，我始终看到4行所有文字行，而不是像演示页面那样每次都一行一行地查看：

Demo Page

在LatestNews演示示例中，每次向上滚动都有一行。

我应该更改什么以及导致该更改的原因，因此每次只有4行，而演示页面中没有一行？

最佳答案

在您当时链接的特定网站中，将padding样式中指定的.demo3设置为0, 0, 0, 80px。

正如您在isolated demo中所看到的那样，使用已发布的代码通常就足够了。

在检查您的链接站点之后。问题似乎出在，您的站点还导入了另一个CSS文件：

<link rel="stylesheet" type="text/css" href="/files/main_style.css?1398686941" title="wsite-theme-css">

该文件包含各种样式，包括带有!important的样式，并且该文件似乎被覆盖或您的CSS样式。

如果打开站点，打开调试器并找到<link...>行并将其删除（仅从控制台），您将看到HTML看起来不错。请注意，您网站的其余部分不会。

我不知道您对该文件有多大影响，但是要补偿而不更改它，请以80px样式将填充从115px更改为.demo3（或任何合适的格式），类似于：

.demo 3{
    ...
    padding: 0, 0, 0, 115px // changed from padding: 0, 0, 0, 80px
    ...
}

我在您网站的控制台中尝试了上述方法，但似乎可以解决问题。

关于javascript - 为什么此javascript将所有行显示在一起，而不是像演示页中那样一一显示？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23340597/