问题遇到的现象和发生背景
想实现文字滚动效果，但是卡在滚动这里，具体问题如下
用代码块功能插入代码，请勿粘贴截图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文字滚动效果---练习</title>
<link rel="stylesheet" href="./roll.css" />
</head>
<body>
<div class="top">
<div class="content clearfix">
<div class="announce fl">最新公告</div>
<ul class="news fl">
<li>把大象装冰箱总共分几步？</li>
<li>1. 邓哥打开冰箱门</li>
<li>2. 邓哥把大象放进去</li>
<li>3. 邓哥关上冰箱门</li>
</ul>
</div>
</div>
<script src="./roll.js"></script>
</body>
</html>
/* 全局 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
/* 功能 */
.clearfix::after {
clear: both;
content: "";
display: block;
}
.fl {
float: left;
}
.fr {
float: right;
}
/* 各自 */
.content {
margin: 10px;
background: #bfedfc;
border-radius: 10px;
}
.announce {
margin: 25px 27px 25px 27px;
height: 26px;
line-height: 26px;
}
.news {
/* border: 1px solid black; */
height: 26px;
/* line-height: 26px; */
padding-left: 53px;
border-left: 2px solid rgb(204, 204, 204);
margin: 25px 0 25px 0;
overflow-y: auto;
}
.news li {
/* height: 21px; */
line-height: 26px;
}
运行结果及报错内容
我的解答思路和尝试过的方法
感觉是边框和行高的问题，但是把边框和每个li的行高设置成对等，也是不行；
我想要达到的结果
123这样的顺序滚动，每个 li 都可以正常看到
