li布局问题

问题示意，好多网站一般都有这种布局，如

问题主要原因，第一个li没有margin-left 其余有（这里只考虑一排的情况）

第一种解决方式：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10             list-style: none;
11         }
12 
13         ul {
14             width: 550px;
15             height: 200px;
16             background-color: #abcdef;
17         }
18 
19         li {
20             float: left;
21             width: 100px;
22             height: 200px;
23             background-color: darkorange;
24         }
25 
26         li:not(:first-child) {
27             margin-left: 50px;
28         }
29     </style>
30 </head>
31 <body>
32 <ul>
33     <li></li>
34     <li></li>
35     <li></li>
36     <li></li>
37 </ul>
38 </body>
39 </html>

第二种解决方式：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10             list-style: none;
11         }
12 
13         ul {
14             width: 550px;
15             height: 200px;
16             background-color: #abcdef;
17         }
18 
19         li {
20             float: left;
21             width: 100px;
22             height: 200px;
23             background-color: darkorange;
24         }
25 
26         li + li {
27             margin-left: 50px;
28         }
29     </style>
30 </head>
31 <body>
32 <ul>
33     <li></li>
34     <li></li>
35     <li></li>
36     <li></li>
37 </ul>
38 </body>
39 </html>

 

posted @ 2017-03-03 11:08  晨落梦公子  阅读(237)  评论(0)  编辑  收藏  举报