css-li标签横向排列

　　有关导航条<li>标签横向排列

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         div{
 8             width: 100%;
 9             height: 80px;
10             background-color: #B5B4B4;
11         }
12         ul{
13             float: right;/*ul向div父元素右方浮动*/
14             list-style: none;/*将默认的列表符号去掉*/
15             margin: 0; /* 将默认的内边距去掉 */
16             padding: 0;/* 将默认的外边距去掉 */
17         }
18         li{
19             list-style: none;
20             margin: 2px;
21             padding: 2px;
22             float: left;/*li标签按顺序向ul父元素左方浮动*/
23         }
24     </style>
25 </head>
26 <body>
27     <div>
28         <ul>
29             <li><a href="#">链接1</a></li>
30             <li><a href="#">链接2</a></li>
31             <li><a href="#">链接3</a></li>
32             <li><a href="#">链接4</a></li>
33         </ul>
34     </div>
35 </body>
36 </html>
View Code

 

posted on 2018-09-20 10:14  有水  阅读(2961)  评论(0)  编辑  收藏  举报

导航