我的网站新闻滑动点击有问题。
问题是文章的标题互相重叠....
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>
最佳答案
你犯了很多错误。首先删除所有 float 。将 ul 移动到选取框内。看看我的代码片段:
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>
关于php - 显示滑动新闻水龙头的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30182982/