显示滑动新闻点击的问题

Question

我有一个问题,这个滑动的水龙头新闻拥有我的网站.

问题是文章的标题是相互的....

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

这是marquee 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>

Answer 1

你犯了很多错误。首先移除所有漂浮物。将 ul 移至选取框内。看我的代码片段：

\n\n

\r\n

\r\n

ul {\r\n  white-space: nowrap;\r\n}\r\n\r\nul li {\r\n  display: inline-block;\r\n  margin: 0 0 0 20px;\r\n  color: #fff;\r\n  text-align: left;\r\n}\r\n\r\nmarquee {\r\n   display: block;\r\n   overflow: hidden;\r\n   padding-left: 5px;\r\n   padding-right: 5px;\r\n}

\r\n

<marquee direction="right" scrolldelay="1" onmouseout="scrollAmount=7" onmouseover="scrollAmount=7" scrollamount="7">\r\n<ul style="width: auto;">\r\n        <li style="list-style: none;">\r\n            <img src="images/logonews.png" width="20" height="20" style="">\r\n            <a href="art.php?id=1010101099">\xd8\xa7\xd9\x84\xd8\xac\xd9\x8a\xd8\xb4 \xd8\xa7\xd9\x84\xd9\x85\xd8\xb5\xd8\xb1\xd9\x8a \xd9\x8a\xd9\x81\xd8\xac\xd9\x91\xd8\xb1 4 \xd9\x85\xd8\xb3\xd8\xa7\xd8\xac\xd8\xaf \xd8\xb4\xd9\x85\xd8\xa7\xd9\x84 \xd8\xb3\xd9\x8a\xd9\x86\xd8\xa7\xd8\xa1</a>\r\n        </li>\r\n        <li style="/* list-style: none; */">\r\n            <img src="images/logonews.png" width="20" height="20" style="">\r\n            <a href="art.php?id=1010101098">\xd8\xa8\xd8\xa7\xd9\x84\xd8\xb5\xd9\x88\xd8\xb1.. "\xd8\xb3\xd8\xa8\xd9\x82" \xd8\xaa\xd8\xb1\xd8\xb5\xd8\xaf \xd8\xaa\xd8\xb6\xd8\xb1\xd8\xb1 \xd9\x85\xd8\xb3\xd8\xa7\xd8\xac\xd8\xaf \xd9\x86\xd8\xac\xd8\xb1\xd8\xa7\xd9\x86 \xd9\x85\xd9\x86 \xd9\x82\xd8\xb0\xd8\xa7\xd8\xa6\xd9\x81 \xd8\xa7\xd9\x84\xd9\x85\xd9\x84\xd9\x8a\xd8\xb4\xd9\x8a\xd8\xa7\xd8\xaa \xd8\xa7\xd9\x84\xd8\xad\xd9\x88\xd8\xab\xd9\x8a\xd8\xa9</a>\r\n        </li>\r\n        <li style="list-style: none;">\r\n            <img src="images/logonews.png" width="20" height="20" style="">\r\n            <a href="art.php?id=1010101097">\xd8\xa7\xd9\x81\xd8\xaa\xd8\xaa\xd8\xa7\xd8\xad \xd8\xa3\xd9\x88\xd9\x84 \xd9\x85\xd8\xb3\xd8\xac\xd8\xaf \xd8\xb9\xd9\x84\xd9\x89 \xd8\xa3\xd8\xb7\xd9\x84\xd8\xa7\xd9\x84 \xd9\x83\xd9\x86\xd9\x8a\xd8\xb3\xd8\xa9 \xd9\x85\xd9\x87\xd8\xac\xd9\x88\xd8\xb1\xd8\xa9 \xd9\x81\xd9\x8a \xd8\xa5\xd9\x8a\xd8\xb7\xd8\xa7\xd9\x84\xd9\x8a\xd8\xa7</a>\r\n        </li>\r\n        <li style="list-style: none;">\r\n            <img src="images/logonews.png" width="20" height="20" style="">\r\n            <a href="art.php?id=1010101096">\xd8\xad\xd9\x83\xd9\x85 \xd9\x82\xd8\xa8\xd8\xb6 \xd8\xa7\xd9\x84\xd9\x8a\xd8\xaf\xd9\x8a\xd9\x86 \xd9\x81\xd9\x8a \xd8\xa7\xd9\x84\xd8\xb5\xd9\x84\xd8\xa7\xd8\xa9</a>\r\n        </li>\r\n        <li style="list-style: none;">\r\n            <img src="images/logonews.png" width="20" height="20" style="">\r\n            <a href="art.php?id=1010101095">\xd8\xa5\xd9\x85\xd8\xa7\xd9\x85\xd8\xa9 \xd8\xa7\xd9\x84\xd9\x85\xd8\xb3\xd8\xa7\xd9\x81\xd8\xb1 \xd8\xa8\xd8\xa7\xd9\x84\xd9\x85\xd9\x82\xd9\x8a\xd9\x85</a>\r\n        </li>\r\n        <li style="list-style: none;">\r\n            <img src="images/logonews.png" width="20" height="20" style="">\r\n            <a href="art.php?id=1010101094">\xd8\xaa\xd8\xb1\xd9\x83 \xd8\xa7\xd9\x84\xd8\xb5\xd9\x84\xd8\xa7\xd8\xa9</a>\r\n        </li>\r\n        <li style="list-style: none;"> \r\n            <img src="images/logonews.png" width="20" height="20" style="">\r\n            <a href="art.php?id=1010101092">\xd8\xad\xd9\x83\xd9\x85 \xd8\xaa\xd9\x83\xd8\xb1\xd8\xa7\xd8\xb1 \xd8\xa7\xd9\x84\xd8\xac\xd9\x85\xd8\xa7\xd8\xb9\xd8\xa9 \xd9\x81\xd9\x8a \xd8\xa7\xd9\x84\xd9\x85\xd8\xb3\xd8\xac\xd8\xaf</a>\r\n        </li>\r\n        <li style="list-style: none;">\r\n            <img src="images/logonews.png" width="20" height="20" style="">\r\n            <a href="art.php?id=1010101090">\xd8\xa8\xd8\xa7\xd9\x84\xd8\xb5\xd9\x88\xd8\xb1.. "\xd9\x86\xd9\x88\xd8\xb1\xd8\xaf \xd9\x83\xd9\x85\xd8\xa7\xd9\x84" \xd8\xa3\xd8\xa8\xd8\xb9\xd8\xaf \xd9\x85\xd8\xb3\xd8\xac\xd8\xaf \xd8\xb9\xd9\x84\xd9\x89 \xd8\xa7\xd9\x84\xd9\x83\xd8\xb1\xd8\xa9 \xd8\xa7\xd9\x84\xd8\xa3\xd8\xb1\xd8\xb6\xd9\x8a\xd8\xa9</a>\r\n        </li>\r\n        <li style="list-style: none;">\r\n            <img src="images/logonews.png" width="20" height="20" style="">\r\n            <a href="art.php?id=1010101089">\xd9\x85\xd8\xb3\xd8\xac\xd8\xaf \xd8\xa7\xd9\x84\xd9\x86\xd9\x82\xd9\x84\xd8\xa9 \xd8\xa8\xd8\xaf\xd9\x8a\xd8\xb1 \xd8\xa7\xd9\x84\xd8\xa8\xd9\x84\xd8\xad \xd9\x8a\xd9\x83\xd8\xb1\xd9\x85 \xd8\xa7\xd9\x84\xd9\x85\xd9\x84\xd8\xaa\xd8\xb2\xd9\x85\xd9\x8a\xd9\x86 \xd9\x81\xd9\x8a \xd8\xb5\xd9\x84\xd8\xa7\xd8\xa9 \xd8\xa7\xd9\x84\xd9\x81\xd8\xac\xd8\xb1</a>\r\n        </li>\r\n        <li style="list-style: none;">\r\n            <img src="images/logonews.png" width="20" height="20" style="">\r\n            <a href="art.php?id=1010101088">\xd8\xa5\xd9\x86\xd8\xb4\xd8\xa7\xd8\xa1 \xd8\xa3\xd9\x88\xd9\x84 \xd9\x85\xd8\xb3\xd8\xac\xd8\xaf \xd9\x85\xd8\xae\xd8\xb5\xd8\xb5 \xd9\x84\xd9\x84\xd9\x86\xd8\xb3\xd8\xa7\xd8\xa1 \xd9\x81\xd9\x8a \xd8\xa8\xd8\xb1\xd9\x8a\xd8\xb7\xd8\xa7\xd9\x86\xd9\x8a\xd8\xa7</a>\r\n        </li>\r\n</ul>\r\n    </marquee>

\r\n

\r\n

\r\n

\n