老师我想这个内容在这个网页水平居中该咋办？
来源：3-4 编程练习
人间第一流
2019-09-29 19:40:38
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
*{margin:0;padding:0;border:0;}
ul{list-style:none;}
.conten{width:100%;}
/*.con1,.con2{width:1200px;overflow:hidden;zoom:1;}*/
ul{overflow:hidden;zoom:1;}
li{float:left;margin:20px;border:1px solid #808080;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class=“conten”>
<ul class="ul1">
<li><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br/>欢迎同学来盗墓渴望学习新知识!</li>
<li><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br/>欢迎同学来盗墓渴望学习新知识!</li>
<li><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br/>欢迎同学来盗墓渴望学习新知识!</li>
</ul>
<ul class="ul1">
<li><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br/>欢迎同学来盗墓渴望学习新知识!</li>
<li><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br/>欢迎同学来盗墓渴望学习新知识!</li>
<li><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br/>欢迎同学来盗墓渴望学习新知识!</li>
</ul>
</div>
</body>
</html>
1回答
-
同学你好，我们可以通过给父盒子conten设置一个固定宽度，再利用margin：0 auto来实现在网页中的水平居中。
（1）由于每个li的宽度是由图片撑起来的，图片宽度是240px，又给每个li加了边框，左右各为1px，所以li的宽度为242px，见下图：
（2）又因为你分别给每个li设置了margin:20px；所以每个li占据的宽度就要加上左右边距为282px，一行一共有三个li，所以就可以设置父盒子conten的宽度为282*3=846px，再设置margin：0 auto就可以让其在网页中自动水平居中。
（3）作业效果图里面，最外层是有边框的哦，建议给父盒子conten加上。
建议参考：
（4）同学你的代码里面有一处标点符号用错了哦，在这不能使用中文标点。
希望我的回答能到帮助到你，望采纳，祝学习愉快！
0
相似问题