哪位可以告诉我，如何才可以把下面这个代码设计成下面这副图片一样的，要做到左面每一项都对齐的。
<div class="mid3">
<ul>
<li><a href="#">销售</a></li>
<li><a href="#">配菜/打荷</a></li>
<li><a href="#">普工/技工</a></li>
<li><a href="#">服务员</a></li>
<li><a href="#">导购员</a></li>
<li><a href="#">保洁</a></li>
<li><a href="#">发型师</a></li>
<li><a href="#">客服</a></li>
<li><a href="#">迎宾/接待</a></li>
<li><a href="#">司机</a></li>
<li id="li1"><a href="#">收银员</a></li>
<li><a href="#">营业员</a></li>
<li><a href="#">保姆</a></li>
<li><a href="#">美容师</a></li>
<li><a href="#">文员</a></li>
<li><a href="#">杂工</a></li>
<li id="li2"><a href="#">汽车修理</a></li>
<li id="li3"><a href="#">厨师</a></li>
<li id="li4"><a href="#">理贷员</a></li>
<li><a href="#">保安</a></li>
<li><a href="#">快递员</a></li>
</ul>
</div>
青草254668浏览 1303回答 2
2回答
-
青草254668
嗯嗯，谢谢 -
pardon110
对齐不难，你可以参考下下面的代码，具体的要看你自己写的整个页面代码。<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> .mid3{width: 1000px;margin: 20px auto;} *{margin: 0;padding: 0;} ul{list-style: none;width:100%;overflow: hidden;} li{float: left;width: 14%;} </style> </head> <body> <div class="mid3"> <ul> <li><a href="#">销售</a></li> <li><a href="#">配菜/打荷</a></li> <li><a href="#">普工/技工</a></li> <li><a href="#">服务员</a></li> <li><a href="#">导购员</a></li> <li><a href="#">保洁</a></li> <li><a href="#">发型师</a></li> <li><a href="#">客服</a></li> <li><a href="#">迎宾/接待</a></li> <li><a href="#">司机</a></li> <li id="li1"><a href="#">收银员</a></li> <li><a href="#">营业员</a></li> <li><a href="#">保姆</a></li> <li><a href="#">美容师</a></li> <li><a href="#">文员</a></li> <li><a href="#">杂工</a></li> <li id="li2"><a href="#">汽车修理</a></li> <li id="li3"><a href="#">厨师</a></li> <li id="li4"><a href="#">理贷员</a></li> <li><a href="#">保安</a></li> <li><a href="#">快递员</a></li> </ul> </body> </html>
随时随地看视频慕课网APP
Html/CSS