本文介绍了一种使用HTML和CSS创建水平滚动列表的方法。通过设置固定的`ul`宽度和使用`inline-block`显示方式使列表项横向排列，并通过外部`div`容器限制宽度并启用横向滚动来实现列表的水平滚动效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 1.在UL上增加一个固定宽度,这个固定宽度一定要能撑得下所有的li*/
ul {
width: 500px;
}
ul li {
display: inline-block;
}
/*2.在ul外层新加一个div*/
div {
width: 200px;
overflow-x: scroll;
}
</style>
</head>
<body>
<div>
<ul>
<li>111</li>
<li>222</li>
<li>33</li>
<li>444</li>
<li>55</li>
<li>5666</li>
<li>7777</li>
<li>7777</li>
<li>7777</li>
<li>7777</li>
</ul>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 1.在UL上增加一个固定宽度,这个固定宽度一定要能撑得下所有的li*/
ul {
width: 500px;
}
ul li {
display: inline-block;
}
/*2.在ul外层新加一个div*/
div {
width: 200px;
overflow-x: scroll;
}
</style>
</head>
<body>
<div>
<ul>
<li>111</li>
<li>222</li>
<li>33</li>
<li>444</li>
<li>55</li>
<li>5666</li>
<li>7777</li>
<li>7777</li>
<li>7777</li>
<li>7777</li>
</ul>
</div>
</body>
</html>
扫一扫
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
