Question

<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>

文本向上滚动都没问题但是在最新的新闻中我总是看到所有文本行的4行，而不是每次都看到每行一行，就像在演示页面中一样：

Demo Page

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

我应该更改什么以及是什么原因导致每次有4行，而不是像演示页中那样？

Answer 1

在您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 ... }风格，类似于：

{{1}}

我在你网站的控制台上尝试了上述操作，似乎可以解决问题。

为什么这个javascript显示所有的行，而不是像演示页面一样一个一个？

1 个答案: