菜单制作:ul li横向排列

CSS菜单制作

 

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>菜单title>
 6     <style type="text/css">
 7         .ui {
 8             width: 1200px;
 9             height: 100px;
10             list-style: none;
11             margin: 0;
12             padding: 0;
13         }
14 
15         .ui li {
16             width: 200px;
17             margin: 0 10px;
18             float: left; /*该处换为display:inline-block;同样效果*/
19 
20         }
21 
22         .ui li a {
23             width: 70px;
24             height: 50px;
25             padding: 0 20px;
26             font-size: 12px;
27             line-height: 50px;
28             border: solid 1px;
29             {#background: red;#}
30             display: inline-block;
31             text-decoration: none;
32             cursor: pointer;
33         }
34     style>
35 head>
36 <body>
37 <ul class="ui">
38     <li><a href="#">首页a>li>
39     <li><a href="#">登录a>li>
40     <li><a href="#">注册a>li>
41     <li><a href="#">服务大厅a>li>
42     <li><a href="#">需求大厅a>li>
43 ul>
44 body>
45 html>
菜单制作CSS

你可能感兴趣的:(菜单制作:ul li横向排列)