float浮动的一些基础常识
程序员文章站
2022-03-07 08:25:29
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>
下一篇： 一不留神就追尾了前面的小车