1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 *{margin: 0;padding: 0;} 11 /* 先给定义的box一个高度和宽度 */ 12 .box{ 1200px;height: 50px;outline:1px red solid;margin:30px auto;} 13 /* 去除ul无序列表的全局样式 */ 14 ul{list-style:none;} 15 /* 再给li的父级一个宽高 */ 16 .box>ul{height: 100%; 100%;} 17 /* 再给li一个宽高 宽是父级除以他的子级的出来的*/ 18 .box>ul>li{height:100%; 150px;outline: 1px solid pink; 19 /* 这是左浮动，要想右浮动就直接把left改变成right; */ 20 float: left; 21 /* 这里让li里面的内容在他的宽度里水平居中 */ 22 text-align: center; 23 /* 这里是让li里面的内容在他的高度里面垂直居中 注：他的父级有多高那么就可以设置他的行高为多少 */ 24 line-height: 50px; 25 } 26 </style> 27 28 </head> 29 <body> 30 <div> 31 <!-- 这是一个外边框的盒子 --> 32 <div class="box"> 33 <ul> 34 <li>你好！明天</li> 35 <li>你好！明天</li> 36 <li>你好！明天</li> 37 <li>你好！明天</li> 38 <li>你好！明天</li> 39 <li>你好！明天</li> 40 <li>你好！明天</li> 41 <li>你好！明天</li> 42 </ul> 43 </div> 44 </div> 45 </body> 46 47 </html>