检查代码，运行效果没问题，麻烦看看该如何优化。

来源：4-7 编程练习

weixin_慕的地5241954

2019-08-11 03:22:28

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
            body,div,h3,ul,li{margin: 0;padding: 0;font-family: "微软雅黑";}
            
            .big{text-align:center;width: 140px;margin: 0 auto;border-top: 1px solid gray;border-right: 1px solid gray; border-left: 1px solid gray; background-color:lightgray;}
            
            h3{width: 100%;margin: 5px auto;}
            
            .elec,.wash,.clothes{border-top: 0.5px  solid gray;border-bottom: 0.5px  solid gray;width: 100%;background-color: white;}
            
            li{list-style: none;margin: 7px auto;display: none;}
            
            a{text-decoration: none;color:black;}
            
            .div1:hover .elec li{display: block;}
            .div2:hover .wash li{display: block;}
            .div3:hover .clothes li{display: block;}  
        </style>
    </head>
    <body>
    <div class="big">
        <div class="div1">
            <a href="#1"><h3>家电</h3></a>
            <ul class="elec">
                <li>冰箱</li>
                <li>洗衣机</li>
                <li>空调</li>
            </ul>
        </div>
        <div class="div2">
            <a href="#2"><h3>洗护</h3></a>
            <ul class="wash">
                <li>洗衣液</li>
                <li>消毒液</li>
                <li>柔顺剂</li>
            </ul>
        </div>
        <div  class="div3">
            <a href="#3"><h3>衣物</h3></a>
            <ul class="clothes">
                <li>衬衫</li>
                <li>裤子</li>
                <li>卫衣</li>
            </ul>
        </div>
      </div>
</body>
</html>

其中li标签中的文本居中了，但是没有跟h3标签的文本前端对齐，跟效果图不一样，这个如何改进？

写回答

1回答