CSS成长之路----知识点篇
2016-06-06 14:35
591 查看
一，ul--li列表水平排列，切居中对齐
主要是利用Li标签中的display属性。设置为display:inline，使li纵向排布，且能够使用text-align:center;使其居中显示
HTML结构：
CSS代码：
效果图：
主要是利用Li标签中的display属性。设置为display:inline，使li纵向排布，且能够使用text-align:center;使其居中显示
HTML结构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习</title> </head> <body> <div id="bNav" class="bNav"> <ul> <li><a href="index.aspx" title="Home">Home</a></li> <li>|</li> <li><a href="info.aspx?info_id=8" title="About Us">About Us</a></li> <li>|</li> <li><a href="info.aspx?info_id=9" title="Department Design">Department Design</a></li> <li>|</li> <li><a href="info.aspx?info_id=10" title="Law Declaration">Law Declaration</a></li> <li>|</li> <li><a href="info.aspx?info_id=11" title="Contact Us">Contact Us</a></li> <li>|</li> <li><a href="info.aspx?info_id=12" title="Application Agent">Application Agent</a></li> <li>|</li> <li><a href="info.aspx?info_id=13" title="Job Services">Job Services</a></li> <li>|</li> <li><a href="info.aspx?info_id=14" title="Apply Link">Apply Link</a></li> </ul> </div> </body> </html>
CSS代码：
#bNav{
margin-top:10px;
background:#D9EBF5;
text-align:center;
}
#bNav ul{
padding:4px 0;
margin:0;
overflow:hidden;
}
#bNav ul li{
display:inline;
padding:0;
}效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 