麻烦老师检查一下4-7编程练习
来源：4-7 编程练习
啤酒泡饭饭
2019-04-09 20:45:36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
div,h3,ul{margin: 0px;padding: 0px;font-family: "宋体";}
.big{width: 110px;background: #f2f4f6;text-align: center;margin: 0px auto;}
h3{border: 1px solid #ececec;}
.elec,.wash,.clothes{display: none;list-style-type: none;font-size: 14px;line-height: 30px;}
.div1:hover .elec{display: block;background-color: white;}
.div2:hover .wash{display: block;background-color: white;}
.div3:hover .clothes{display: block;background-color: white;}
</style>
</head>
<body>
<div class="big">
<div class="div1">
<h3>家电</h3>
<ul class="elec">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="div2">
<h3>洗护</h3>
<ul class="wash">
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3">
<h3>衣物</h3>
<ul class="clothes">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>
总感觉不太一样，而且“冰箱 空调 洗衣机”不知道怎么左对齐，麻烦老师解答一下，谢谢，给老师笔芯！！！
1回答
-
好帮手慕慕子
2019-04-10
同学你好
鼠标悬浮后显示的ul没有边框。 建议： 为ul添加左右边框， 以及最后一个ul添加下边框，让实现效果更好
关于对齐这里， 可以对ul元素使用padding-left属性实现元素左对齐。
建议修改： （1）删除为.big设置的文本居中属性text-align:center;（2）为标题添加文本居中属性， 实现标题居中显示 。（3）为列表设置padding-left值， 实现列表元素左对齐
如果帮助到了你， 欢迎采纳
祝学习愉快~~~
0
相似问题