<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">動態</a></li>
<li><a href="#">幫助</a></li>
</ul>2.
豎向：設置display的值爲block
橫向：inline-block(橫向)，這樣做是爲了使行內元素a變爲塊級元素從而設置其的高度和寬度,寬度也決定了每個導航 鏈接的間距3.設置ul中的li向左浮動，如果有父級包含塊的問題，記住在父級包含塊中設置overflow:auto;
4.讓文字居中，去掉下劃線，項目符號等
豎向：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul li a{
display: block;
height: 2em;
line-height: 2em;
color: #0836B9;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">動態</a></li>
<li><a href="#">幫助</a></li>
</ul>>
</body>
</html>
橫向：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul li {
float: left;
list-style: none;
}
ul li a{
display: block;
width: 6em;
height:3em;
line-height: 3em;
text-align: center;
color:#F4F2F2;
border-left: 1px solid #c8c8c8;
background:#564E4E;
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">動態</a></li>
<li><a href="#">幫助</a></li>
</ul>
</body>
</html>