我在慕课网 的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
提交
取消