导航， 少量数据表格， 居中
<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml>
<head>
<title> ul 和 li 应用 </title>
<style type = text/css>
#MENU {WIDTH: 1000PX; ความสูง: 35PX; ลอย: ขวา; มาร์จิ้น: 0PX; ชัดเจน: ทั้งสอง; แนวตั้ง-แนว: ด้านล่าง;}
#ul li {ประเภทรายการประเภท: ไม่มี; ล้าง: ทั้งสอง; ความกว้าง: 100px; แสดง: อินไลน์; ขนาดตัวอักษร: ใหญ่กว่า;}
#myul li {float: left; width: 100px;}
</style>
</head>
<body>
<div id = เมนู>
<ul id = ul>
<li> <a title = href = http: // localhost: 1435/bookshop/index.aspx> 首页 </a> </li>
<li> <a title = href = http: // localhost: 1435/bookshop/hybooks.aspx> 行业图书 </a> </li>
<li> <a title = href = http: // localhost: 1435/bookshop/clothing.aspx> 服饰潮流 </a> </li>
<li> <a title = href = http: // localhost: 1435/bookshop/> 美容会所 </a> </li>
<li> <a title = href = http: // localhost: 1435/bookshop/> 妈咪宝贝 </a> </li>
<li> <a title = href = http: // localhost: 1435/bookshop/> 礼品书籍 </a> </li>
<li> <a title = href = http: // localhost: 1435/bookshop/> 新闻资讯 </a> </li>
<li> <a title = href = http: // localhost: 1435/bookshop/> 用户留言 </a> </li>
<li> <a title = href = http: // localhost: 1435/bookshop/> 联系我们 </a> </li>
</ul>
</div>
<div> 默认是竖排， 并且带圆点
<ul>
<li> สวัสดี </li>
<li> สวัสดี </li>
<li> สวัสดี </li>
<li> สวัสดี </li>
</ul>
</div>
<div>
<ul>
<li style = list-style-type: none;> 去掉圆点 </li>
<li style = display: inline;> สวัสดี </li>
<li> สวัสดี </li>
<li style = display: inline;> สวัสดี </li>
</ul>
</div>
<!-横向的方法, 如果要居中， 需要设置宽度才可以， 这个宽度要和里面的 li 总长度一样。-->
<div style = text-allign: center; พื้นหลัง: #def>
<ul style = ความกว้าง: 150px; พื้นหลัง: #eee;>
<li style = float: ซ้าย;> สวัสดี </li>
<li style = float: ซ้าย;> สวัสดี </li>
<li style = float: ซ้าย;> สวัสดี </li>
<li style = float: ซ้าย;> สวัสดี </li>
<li style = float: ซ้าย;> สวัสดี </li>
</ul>
</div>
<!-制作表格的原理， ul 宽度为 300px, li 宽度为 100px， 则成三列->
<div style = text-allign: center; พื้นหลัง: #eef>
<ul id = myul style = ความกว้าง: 300px; พื้นหลัง: #eee>
<li> สวัสดี </li>
<li> สวัสดี </li>
<li> สวัสดี </li>
<li> สวัสดี </li>
<li> สวัสดี </li>
<li> สวัสดี </li>
<li> สวัสดี </li>
<li> สวัสดี </li>
<li> สวัสดี </li>
</ul>
</div>
</body>
</html>