滑动新闻标签的显示问题

Question

我在我的网站上使用的滑动tap存在问题。

问题在于文章标题互相重叠....

CSS:

background: none;
display: inline-block;
list-style: disc;
margin: 0 0 0 20px;
color: #fff;
letter-spacing: ;
float: left;
/* width: 300px; */
text-align: left;
}

以下是跑马灯代码 CSS:

 display: inline-block;
 width: -webkit-fill-available;
 overflow: hidden;
 text-align: initial;
 /* width: 300px; */
 float: right;
 padding-left: 5px;
 padding-right: 5px;
 /* white-space: nowrap; */

HTML

<ul style="width: auto;">
    <marquee direction="right" scrolldelay="1" onmouseout="scrollAmount=7" onmouseover="scrollAmount=7" scrollamount="7">
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101099">الجيش المصري يفجّر 4 مساجد شمال سيناء</a>
        </li>
        <li style="/* list-style: none; */">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101098">بالصور.. "سبق" ترصد تضرر مساجد نجران من قذائف المليشيات الحوثية</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101097">افتتاح أول مسجد على أطلال كنيسة مهجورة في إيطاليا</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101096">حكم قبض اليدين في الصلاة</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101095">إمامة المسافر بالمقيم</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101094">ترك الصلاة</a>
        </li>
        <li style="list-style: none;"> 
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101092">حكم تكرار الجماعة في المسجد</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101090">بالصور.. "نورد كمال" أبعد مسجد على الكرة الأرضية</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101089">مسجد النقلة بدير البلح يكرم الملتزمين في صلاة الفجر</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101088">إنشاء أول مسجد مخصص للنساء في بريطانيا</a>
        </li>
    </marquee>
</ul>

- ABDULLAH MAKKI

---

把代码粘贴回来，那张图片不好。 - Rasclatt

你发布的那张图片太小了，根本看不清楚是什么... - Rasclatt

你说你有问题，但我没有看到问题的解释。目前这只是一个代码转储，带有一个糟糕的示例图像，它在呼喊“修复我”。 - Sean

问题在于......文章标题重叠了。 - ABDULLAH MAKKI

这是一张清晰的图片，抱歉。https://lh3.googleusercontent.com/-z3xhSJRhWco/VVGeHz9plaI/AAAAAAAAAEw/0cc1uM1t8mc/w346-h192/p.png - ABDULLAH MAKKI

看起来你没有展示所有的CSS，因为当我在http://jsfiddle.net/4n2x8n4t/上使用代码时，它并没有重叠。所以看起来你的问题不在于你发布的内容，而是你没有发布的内容。 - Sean

Answer 1

你犯了很多错误。首先移除所有的浮动元素。将ul标签放入marquee标签中。看看我的代码片段：

ul {
  white-space: nowrap;
}

ul li {
  display: inline-block;
  margin: 0 0 0 20px;
  color: #fff;
  text-align: left;
}

marquee {
   display: block;
   overflow: hidden;
   padding-left: 5px;
   padding-right: 5px;
}

<marquee direction="right" scrolldelay="1" onmouseout="scrollAmount=7" onmouseover="scrollAmount=7" scrollamount="7">
<ul style="width: auto;">
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101099">الجيش المصري يفجّر 4 مساجد شمال سيناء</a>
        </li>
        <li style="/* list-style: none; */">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101098">بالصور.. "سبق" ترصد تضرر مساجد نجران من قذائف المليشيات الحوثية</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101097">افتتاح أول مسجد على أطلال كنيسة مهجورة في إيطاليا</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101096">حكم قبض اليدين في الصلاة</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101095">إمامة المسافر بالمقيم</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101094">ترك الصلاة</a>
        </li>
        <li style="list-style: none;"> 
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101092">حكم تكرار الجماعة في المسجد</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101090">بالصور.. "نورد كمال" أبعد مسجد على الكرة الأرضية</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101089">مسجد النقلة بدير البلح يكرم الملتزمين في صلاة الفجر</a>
        </li>
        <li style="list-style: none;">
            <img src="images/logonews.png" width="20" height="20" style="">
            <a href="art.php?id=1010101088">إنشاء أول مسجد مخصص للنساء في بريطانيا</a>
        </li>
</ul>
    </marquee>

- Stanislau Ladutska