1 2 3 4 5 6 7 8 Document 9 27 28 29 30 31 32 33 34 你好！明天 35 你好！明天 36 你好！明天 37 ... ...
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{width: 1200px;height: 50px;outline:1px red solid;margin:30px auto;} 13 /* 去除ul無序列表的全局樣式 */ 14 ul{list-style:none;} 15 /* 再給li的父級一個寬高 */ 16 .box>ul{height: 100%;width: 100%;} 17 /* 再給li一個寬高 寬是父級除以他的子級的出來的*/ 18 .box>ul>li{height:100%;width: 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>
