第一步：父層設定文本居中屬性
ul{
text-align:center;
}
第二步：li設定行內樣式
li{
display:inline;
}
PS
只需以上兩步就可以實作導航欄居中顯示了，但為了美觀好看，可以稍微加點料，以下供參考
<style type="text/css">
body{
background:#232e3c;
padding:16px;
}
#nav ul{
text-align:center;
list-style:none;
}
#nav li{
display:inline;
margin-left:16px;
background:#fff;
border-radius:25px;
padding:10px;
}
#nav a{
color:#000;
text-decoration:none;
font-size:18px;
font-weight:bold;
font-family:consolas;
}
#nav li:hover{
background:#7bc3d6;
}
</style>
- list-style:none; 取消串列前面的串列樣式
- border-radius:25px; 設定圓角背景樣式
- text-decoration:none; 取消鏈接下劃線
- li:hover 設定一下滑鼠移上去時的背景變色
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/18299.html
標籤：Html/Css