帮我修改一下呗 老师 ？
来源：4-7 编程练习
Mr丶Zhang小
2018-01-28 17:33:22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
body,h3,ul,li,div{padding: 0;margin:0;}
ul{list-style: none;}
.big{width: 150px;margin:auto;border: 1px solid gray;}
h3{background-color:#F2F0F0;text-align: center;}
.div1,.div2,.div3{height:30px;line-height: 30px;border-bottom:1px solid gray;}
.div1:hover li,.div2:hover li,.div3:hover li{display:inline-block;}
.div1:hover,.div2:hover,.div3:hover{height:120px;background-color: white;}
.clear-border{border-bottom:0px;}
li{display: none;}
.elec li,.wash li,.clothes li{padding-left: 55px;}
</style>
</head>
<body>
<div>
<div>
<h3>家电</h3>
<ul>
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div>
<h3>洗护</h3>
<ul>
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3 clear-border">
<h3>衣物</h3>
<ul>
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>
感觉最后一个的距离左边的padding-left和其他有点不一样欸？
不知道是浏览器的问题还是？
1回答
-
bbbboom
2018-01-29
同学，我看了你的代码，body中的代码没有添加class名，要把编程题中正确的添加上，然后在Chrome上面测试之后是没有问题的，可能是浏览器的问题，建议你以后测试要多用主流的浏览器哦！还有一个小建议：
让列表显示时，可以使用display:block;这样就不需要设置各项li的padding-left值了，直接给外层div设置文本居中即可：
如果还有问题，欢迎回复哦！ヾ(◍°∇°◍)ﾉﾞ
0h018-01-29
