练习4-5家电里面的三个列表文字怎么靠左对齐,代码还有哪里可以改进

练习4-5家电里面的三个列表文字怎么靠左对齐,代码还有哪里可以改进

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
        *{margin:0;padding:0;}
        .big{text-align:center;}
        h3 {background-color:rgb(237,237,237);width:150px;height:25px;margin:0 auto;padding:10px;font-size:20px;border:1px rgb(231,231,231) solid;}
        ul{display:none;border:1px rgb(231,231,231) solid;width:170px;margin:0 auto;list-style-type:none;font-size:15px;text-align:center;}
        .div1:hover ul{display:block;}
        .div2:hover ul{display:block;}
        .div3:hover ul{display:block;}
        
        
          /*样式补充*/
          
          
        </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>

http://img1.sycdn.imooc.com//climg/5ac255740001725c01100123.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

因为你给文字设置了text-align:center;去掉这个属性就可以左对齐;修改地方如下:

http://img1.sycdn.imooc.com//climg/5ac3483b000141cf04460471.jpg

  • SUNXINCHUN 提问者 #1
    非常感谢!
    2018-04-04 15:56:26
  • SUNXINCHUN 提问者 #2
    .elec li:nth-child(2){text-indent: 1em;} 首行缩进
    2018-04-04 16:02:36
listnone 2018-04-03 14:11:50

你设置的居中是big这个盒子对于浏览器的,给冰箱,洗衣机,空调设置居中是相对与这个big这个大盒子的。.elec,.wash,.clothes{margin:0 auto;}试一下

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师