不确定宽度的盒子居中方法之一

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>不确定宽度的盒子居中方法之一</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         ul{
12             list-style: none;
13         }
14         .father{
15             width: 500px;
16             height: 300px;
17             background-color: #fff0f0;
18             margin: 100px auto;
19         }
20 
21         /*        不确定宽度的盒子居中方法： 给父元素设置 float：left ；position：relative； left：50%；    */
22         /*      然后给子元素设置：position：relative； left：-50% ；     */
23 
24         .test{
25             clear: both;
26             float: left;
27             position: relative;
28             left: 50%;
29             margin: 50px 0;
30         }
31         .test li {
32             padding: 5px;
33             float: left;
34             border: 1px solid gainsboro;
35             text-align: center;
36             position: relative;
37             left: -50%;
38             /*display: inline-block;*/
39         }
40 
41 
42    </style>
43 </head>
44 <body>
45 
46     <div class="father">
47         <ul class="test">
48             <li>案例一</li>
49         </ul>
50         
51         <ul class="test">
52             <li>案例二</li>
53             <li>案例二</li>
54             <li>案例二</li>
55             <li>案例二</li>
56             <li>案例二</li>
57         </ul>
58     </div>
59 
60 
61 </body>
62 </html>
posted on 2017-03-05 15:06 恋灬旧阅读(724) 评论(0) 收藏举报