<!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>