请问“家电”列表的“洗衣机”如何在整体居中对齐的情况下跟“冰箱”“空调”左对齐?

来源:4-7 编程练习

milmilbaby

2020-08-12 14:03:37

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
        body,div,h3,ul{padding:0;margin:0;list-style:none;}
        .big{width:120px;background-color:#ececec;text-align:center;margin:30px auto;}
        .div1{border:1px solid #C0C0C0;} 
        .div2{border:1px solid #C0C0C0;} 
        .div3{border:1px solid #C0C0C0;} 
        li{display:none;}
        .div1:hover li{display:block;background-color:white;font-size:14px;line-height:25px;}
        .div2:hover li{display:block;background-color:white;font-size:14px;line-height:25px;}
        .div3:hover li{display:block;background-color:white;font-size:14px;line-height:25px;}
        </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回答

好帮手慕星星

2020-08-12

同学你好,没有办法做到水平居中的同时,长短不一的文字左对齐。差不多居中就可以,例如

http://img.mukewang.com/climg/5f33967109cd297c05270219.jpg

优化:相同的样式选择器可以进行简化,统一设置。参考

http://img.mukewang.com/climg/5f3395ed097077ac07700599.jpghttp://img.mukewang.com/climg/5f3396d609366ff908851306.jpg

祝学习愉快!

0

0 学习 · 40143 问题

查看课程