<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="te
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: auto;
height: 96px;
background-color: #f0f0f0;
margin: 0 32px;
overflow: auto;
padding: 0;
}
.list {
list-style-type: none;
/*width: 3000px;*/
margin: 0;
padding: 0;
display: -webkit-box;
display: -moz-box;
}
.line {
margin: 0;
*display: inline; // 让元素变成行内元素
vertical-align: top;
padding: 0 16px;
height: 96px;
line-height: 96px;
font-size: 24px;
}
</style>
</head>
<body>
<div class="box">
<ul class="list">
<li class="line">子元素</li>
<li class="line">子元素</li>
<li class="line">子元素</li>
<li class="line">子元素</li>
<li class="line">子元素</li>
<li class="line">子元素</li>
<li class="line">子元素</li>
<li class="line">子元素</li>
<li class="line">子元素</li>
<li class="line">子元素</li>
<li class="line">子元素</li>
<li class="line">子元素</li>
<li class="line">子元素</li>
<li class="line">子元素</li>
</ul>
</div>
</body>
</html>
