我在慕課網(wǎng) 的html學(xué)習(xí)了水平居中，學(xué)完后我是這樣寫的。<!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>這樣寫對么？有什么優(yōu)點(diǎn)和缺點(diǎn)？
2 回答
慕粉0202
TA貢獻(xiàn)4條經(jīng)驗(yàn) 獲得超8個贊
如果是div塊元素要居中 我們一般會采用 ? margin：0 auto；來實(shí)現(xiàn)
如果是文字.標(biāo)題等居中，一般采用 text-align：center；
已采納
剛毅87
TA貢獻(xiàn)345條經(jīng)驗(yàn) 獲得超309個贊
如果真挑優(yōu)點(diǎn)的話,就是代碼量小,易懂;
缺點(diǎn):不能設(shè)置. container 和 ul 的樣式,也就是說只能這個樣子,沒一點(diǎn)實(shí)用性
給你改進(jìn)了一些,你可以參考一下
<!DOCTYPE?HTML>
<html>
<head>
<meta?charset="utf-8">
<title>水平居中</title>
<style>
/*一般做項(xiàng)目前都會重置系統(tǒng)默認(rèn)屬性*/
*{
margin:?0;
padding:?0;
}
/*設(shè)置?body?的寬為網(wǎng)頁界面寬度的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
提交
取消