4-7 编程练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
          body,div,h3,ul{margin:0px;padding:0px;}
          li{list-style: none;}

          .big{width:120px;margin:0 auto;font-family:"STSong";border:1px #C8C8C8 solid;
          background-color:#F0F0F0;}
          
          .elec{display:none;background-color:#FFFFFF;padding-left:45px;line-height:2.5em;}
          .wash{display:none;background-color:#FFFFFF;padding-left:45px;line-height:2.5em;}
          .clothes{display:none;background-color:#FFFFFF;padding-left:45px;line-height:2.5em;}
          
          .div1:hover ul{display: block;} 
          .div2:hover ul{display: block;}
          .div3:hover ul{display: block;}
          
          span{display:block;border-bottom:1px #C8C8C8 solid;text-align: center;padding:5px;}

        </style>
    </head>
    <body>
    <div class="big">
        <div class="div1">
            <span><h3>家电</h3></span>
            <ul class="elec">
                <li>冰箱</li>
                <li>洗衣机</li>
                <li>空调</li>
            </ul>
        </div>
        <div class="div2">
            <span><h3>洗护</h3></span>
            <ul class="wash">
                <li>洗衣液</li>
                <li>消毒液</li>
                <li>柔顺剂</li>
            </ul>
        </div>
        <div  class="div3">
            <span><h3>衣物</h3></span>
             <ul class="clothes">
                <li>衬衫</li>
                <li>裤子</li>
                <li>卫衣</li>
            </ul>
        </div>
      </div>
</body>
</html>

达到跟参考一样的效果了，请检查一下代码是否规范。

ul标签里的内容（冰箱，洗衣机，空调.....）如何居中呢？我是用padding-left:45px 这样的方法居中的，45px也是试了几次试出来这个是大概居中的效果。还有其他方法吗？计算的话也不知道列表里的字占多少px值。。。

谢谢！

楊同学 2019-06-13

源自：盒子模型 4-7 编程练习