我在慕課網 的html學習了水平居中，學完后我是這樣寫的。<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>水平居中</title><style>.container{? ?text-align:center;}.container ul{? ? list-style:none;? ? margin:0; padding:0; }.container li{;display:inline-block;}.container a{? ? text-decoration:none;? ? color:#000;}.container a:hover {? ? background-color:#930;? ? color:#fff;?}</style></head><body><div class="container"> <ul>? ? <li><a href="#">1</a></li>? ? ? ? <li><a href="#">2</a></li>? ? ? ? <li><a href="#">3</a></li>? ? </ul></div></body></html>這樣寫對么？有什么優點和缺點？
2 回答
已采納
剛毅87
TA貢獻345條經驗 獲得超309個贊
如果真挑優點的話,就是代碼量小,易懂;
缺點:不能設置. container 和 ul 的樣式,也就是說只能這個樣子,沒一點實用性
給你改進了一些,你可以參考一下
<!DOCTYPE?HTML>
<html>
<head>
<meta?charset="utf-8">
<title>水平居中</title>
<style>
/*一般做項目前都會重置系統默認屬性*/
*{
margin:?0;
padding:?0;
}
/*設置?body?的寬為網頁界面寬度的100%*/
body{
width:?100%;
}
.container?{
width:?100%;
}
/*方法一:display:?inline-block;*/
.container?ul?{
width:?100%;
list-style:?none;
text-align:?center;
}
.container?li?{
display:?inline-block;
margin:?0?10px;
}
/*方法二:彈性布局
.container?ul?{
width:?100%;
list-style:?none;
display:?flex;
justify-content:?center;
}
.container?li?{
margin:?0?10px;
}*/
.container?a?{
text-decoration:?none;
color:?#000;
}
.container?a:hover?{
background-color:?#930;
color:?#fff;
}
</style>
</head>
<body>
<div?class="container">
<ul>
<li><a?href="#">1</a></li>
<li><a?href="#">2</a></li>
<li><a?href="#">3</a></li>
</ul>
</div>
</body>
</html>望采納
添加回答
舉報
0/150
提交
取消