html：请问这样写的水平居中，有什么优点和缺点？
我在慕课网 的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>
这样写对么？有什么优点和缺点？
聪明宝贝宝贝浏览 1589回答 2
2回答
-
慕粉0202
如果是div块元素要居中 我们一般会采用 margin：0 auto；来实现如果是文字.标题等居中，一般采用 text-align：center； -
刚毅87
如果真挑优点的话,就是代码量小,易懂;缺点:不能设置. 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>望采纳
随时随地看视频慕课网APP
Html/CSS
前端工具