请教洗衣机这个栏是怎么简便对齐上下的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
/*样式补充*/
.big{text-align:center;
background-color:#eeeeee;
padding:0;
width:200px;
margin:0 auto;
}
.div1,.div2,.div3{border:1px #dddddd solid;
}
li{list-style-type:none;}
.elec,.wash,.clothes{display:none;
background-color:#ffffff;
text-align:center;
padding:3px 10px 3px 10px;
margin:0 auto;
}
.div1:hover .elec,.div2:hover .wash,.div3:hover .clothes{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>
正在回答
同学你好， 可以直接给ul设置左内边距实现列表元素左侧对齐。
建议修改： （1） 删除给大盒子和列表设置的文本居中属性 （2）只给标题h3设置文本居中属性，实现标题居中（3）删除洗衣机标签中的空格，统一设置列表的左内边距， 实现左侧对齐
示例：
如果帮助到了你 欢迎采纳
祝学习愉快~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星