首页 > 代码库 > 列表与导航,内联

列表与导航,内联

23.1列表图片
1.内边距与外边距
ul{
list-style-type:none;
margin:0;
padding:0;
}

ul{
list-style-type:none;
margin:0;
padding:0;
line-height:150%;
}
ul li{
krgound:url(xxx.gif)no-repeat left center;
padding-left:14px;
}
4.内联
ul与li本是区块
ul加上list-style-type:disc;
li加上display:inline;
可变成内联
5.背景图片和内联列表
ul{
list-style-type:none;
}
li{
display:inline;
background:url(xxx.gif)no-repeat left center;
margin:0 0 0 10px;
padding:0 0 0 15px;
}
6.垂直导航栏
<div>
<ul>
<li><a href="http://www.mamicode.com/#">drubjs menu</a></li>
</ul>
</div>
ul{
list-style-type:none;
margin:5px;
padding:2px;
width:160px;
font-size:12px;
}
li{
brckground:#ddd;
margin:0;
padding:2px 10px;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-ridht:1px solid #fff;
border-bottom:1px solid #fff;
}
7.创建垂直翻转的列表
ul{
margin:0;
padding:0;
list-style-type:none;
}
ul a{
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
background:#94b8e9 url(xxx.gif)no-
}

列表与导航,内联