1
2
3
4
5
6
7
8
document9
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
27
28
29
30
31
32
33
34
你好!明天35
你好!明天36
你好!明天37
你好!明天38
你好!明天39
你好!明天40
你好!明天41
你好!明天42
43
44
45
46
47