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