永发信息网

用CSS写怎样才能控制Li里面的文字排成这样 如图

答案:2  悬赏:0  手机版
解决时间 2021-01-14 08:22
用CSS写怎样才能控制Li里面的文字排成这样 如图
最佳答案
设置li标签的宽度,然后在每个li里设他们的padding-left(内边距) 这是我能想到最简单的办法了





无标题文档






全部回答
好像是用定位的。。追问求代码追答不知道是不是这样的。




li定位</title><br /><style type="text/css"><br />body{<br /> padding:0px;<br /> margin:0px;<br /> font-size:16px;<br /> background:#272822;<br />}<br />ul{<br /> list-style:none;<br /> padding:0px;<br /> margin:0px;<br /> line-height:180%;<br />}<br />ul li{<br /> position:relative;<br />}<br />.one{<br /> left:20px;<br />}<br />.two{<br /> left:30px;<br />}<br />.three{<br /> left:40px;<br />}<br />.four{<br /> left:55px;<br />}<br />.five{<br /> left:40px;<br />}<br />.six{<br /> left:30px;<br />}<br />.seven{<br /> left:20px;<br />}<br /></style><br /></head><br /><body><br /><br /> <li class="one">Why not?</li><br /> <li class="two">Why not?</li><br /> <li class="three">Why not?</li><br /> <li class="four">Why not?</li><br /> <li class="five">Why not?</li><br /> <li class="six">Why not?</li><br /> <li class="seven">Why not?</li><br /></ul><br /></body></div> <!--海纳信息网-手机版mip20:6_B一--> <!-- <div class="mip-adbd"> <mip-ad type="baidu-wm-ext" domain="zhsho1.zhsho.cn" token="faswzswsw"> <div id="faswzswsw"></div> </mip-ad> </div> --> <!--百度联盟广告结束--> <!--海纳信息网-手机版mip20:6_C一--> <!-- <div class="mip-adbd"> <mip-ad type="baidu-wm-ext" domain="zhsho1.zhsho.cn" token="pkjhzhhhs"> <div id="pkjhzhhhs"></div> </mip-ad> </div> --> <!--百度联盟广告结束--> <!--不良信息访问者自举报--> <div class="s-title">我要举报</div> <div class="content-jubao">如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报! <mip-form method="post" url="https://m.zhsho.com/api/report.php?itemid=4259474&mid=10"> <div class="jubao"><input type="input" name="content" validatetarget="content" value="用CSS写怎样才能控制Li里面的文字排成这样 如图 "></div> <div class="jubao"><input type="input" name="type" value="不良信息"></div> <input type="submit" value="点此我要举报以上问答信息"> </mip-form> </div> <!--举报结束--> <!--大家都在看推荐--> <div class="s-title">大家都在看</div> <div class="contact"> <table width="100%"> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/cd2857cd3d93e42a90fda681f285b316.html" target="_blank" data-title="请问自驾游每天行多少公里比较合适?因为开车时间久了也不好,短了又没必要开车....">请问自驾游每天行多少公里比较合适?因为开车</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/e5e78027f9d797da353e6078dce1b75c.html" target="_blank" data-title="冻鹅肠怎么发制更脆火锅">冻鹅肠怎么发制更脆火锅</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/5b4a342f60d4240d2fdb78cbe1019c4f.html" target="_blank" data-title="谁知道谷奇核孔膜开水过滤器,来说说。">谁知道谷奇核孔膜开水过滤器,来说说。</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/53f0681f71d541e2338b913bbe265366.html" target="_blank" data-title="单选题Try________atthebackdoorifnobody">单选题Try________atthebackdoorifnobody</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/a9191723db5222bb91b254239d26f823.html" target="_blank" data-title="雪娇郅美价格">雪娇郅美价格</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/fd1f316e09fb4840eb814070ada3d4af.html" target="_blank" data-title="这个加密的txt怎么解">这个加密的txt怎么解</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/13d0e95de0695e81229d32b4cf8bc49d.html" target="_blank" data-title="iphone8 能连续使用多久">iphone8 能连续使用多久</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/ed332cb9090259f045015a2e947411fc.html" target="_blank" data-title="房子靠近垃圾场如何化解">房子靠近垃圾场如何化解</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/17d200c1352f918fa14fa9bc35aaf68f.html" target="_blank" data-title="工商银行个人网上银行同行转账单笔金额上限是多少?">工商银行个人网上银行同行转账单笔金额上限是</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/dc32a54a00e90b87b853bb7c5c295b51.html" target="_blank" data-title="美国德克萨斯州与北京的时差">美国德克萨斯州与北京的时差</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/65c38b6007c77f37c74fa9b25fb54117.html" target="_blank" data-title="帕萨特1.4T最高能跑多少">帕萨特1.4T最高能跑多少</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/a3d5c1c8fc5727f8e363e2e969154d33.html" target="_blank" data-title="到上海高铁火车站后到哪个上海长宁区华阳路112号坐地铁几号线">到上海高铁火车站后到哪个上海长宁区华阳路11</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/e305acd8311296023e1e935daf7ff577.html" target="_blank" data-title="版画微派是什么意思">版画微派是什么意思</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/55dc2b92d2ad3a38a0658acb2482a9ec.html" target="_blank" data-title="仙剑1的仙灵岛敲石像时锤子碎了。怎么搞镄">仙剑1的仙灵岛敲石像时锤子碎了。怎么搞镄</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/87a9ac6015d455b8d9c20c28864b068a.html" target="_blank" data-title="电风扇吹时间长了身上会出现一些大扁豆豆吗">电风扇吹时间长了身上会出现一些大扁豆豆吗</a></td> </tr> </table></div> <!--大家都在看结束--> <!--海纳信息网-手机版mip原生图文_B--> <!-- <div class="mip-adbd"> <mip-ad type="baidu-wm-ext" domain="zhsho1.zhsho.cn" token="gbatkydyh"> <div id="gbatkydyh"></div> </mip-ad> </div> --> <!--百度联盟广告结束--> <!--知道推荐--> <div class="s-title">推荐资讯</div> <div class="contact"> <table width="100%"> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/9a3bd303ca69f96a1c68cd0e904a9e84.html" target="_blank" data-title="如何正确使用攀岩胶带">如何正确使用攀岩胶带</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/d3877f3aafb733f138e98ad521143a5b.html" target="_blank" data-title="咱大同哪的眼镜店比较好,推荐几个.不要坑人的">咱大同哪的眼镜店比较好,推荐几个.不要坑人</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/e8d61b9b3d4832534e684d0910ead7d4.html" target="_blank" data-title="梦见新坟很多花圈,而且不停地在唱歌">梦见新坟很多花圈,而且不停地在唱歌</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/dc12ce11107144be7233c31ab2f08d00.html" target="_blank" data-title="芝麻分有负面记录 有没有什么口子不需要芝麻分的 要4到5000左右">芝麻分有负面记录 有没有什么口子不需要芝麻</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/87378671cb6e093b503a986dca0a5739.html" target="_blank" data-title="姓李带有莹字的名字">姓李带有莹字的名字</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/0b9bfbf2f571cdec3f26edce8917e452.html" target="_blank" data-title="紫微斗数男命:化权,天官同时入命宫。代表有权力。对吗?">紫微斗数男命:化权,天官同时入命宫。代表有</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/d3262ab8804fa095910f103f544925b2.html" target="_blank" data-title="i5 5200u性能相当于台式机的什么CPU?">i5 5200u性能相当于台式机的什么CPU?</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/4f5e6a80098e22f2507ef1d14c5a1f72.html" target="_blank" data-title="B站!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!">B站!!!!!!!!!!!!!!!!!!!</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/8cf729ca167885028a2a208cf7db82e4.html" target="_blank" data-title="六君闹市是指什么,有什么特殊含义吗">六君闹市是指什么,有什么特殊含义吗</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/f38da9c91c344c9b5001aa084845974c.html" target="_blank" data-title="《侠盗猎车手5》GTA5布加迪威龙在什么地方">《侠盗猎车手5》GTA5布加迪威龙在什么地方</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/a6c59d6bc05671f5cc2d9e8ecad31c64.html" target="_blank" data-title="求成一个3*3的整型矩阵对角线元素之和">求成一个3*3的整型矩阵对角线元素之和</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/0ef39776e65b294498423ed9e07fbceb.html" target="_blank" data-title="写一个图象经过一、二、四象限的一次函数是________.">写一个图象经过一、二、四象限的一次函数是__</a></td> </tr> </table><table width="100%"> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/508c37cc66ad7f2b48119b28f5de6e2c.html" target="_blank" data-title="正方形一边上任一点到这个正方形两条对角线的距离之和等于对角线长的 A:1/3 B:1/2 C:1/4 D:2倍">正方形一边上任一点到这个正方形两条对角线的</a></td> </tr> <tr> <td><a data-type="mip" href="https://mip.zhsho.com/know/0b3ca78ea8ce3bb3d67f13092a35cf4b.html" target="_blank" data-title="阴历怎么看 ?">阴历怎么看 ?</a></td> </tr> </table></div> <!--推荐结束--> </div> <!--不良信息访问者自举报--> <br> <div class="s-title-jubao"> <mip-form method="post" url="https://m.zhsho.com/api/report.php?itemid=4259474&mid=10"> <div class="jubao"><input type="input" name="content" validatetarget="content" value="用CSS写怎样才能控制Li里面的文字排成这样 如图 "></div> <div class="jubao"><input type="input" name="type" value="不良信息"></div> <input type="submit" value="如以上问答为侵权/违法等信息,可以点此举报!"> </mip-form> </div> <!--举报结束--> <!--增加底部开始--> <div class="main"> <div class="head_footer"> <a href="https://mip.zhsho.com/">网站首页</a> | <a href="https://m.zhsho.com/about/about.html" rel="nofollow">关于我们</a> | <a href="https://m.zhsho.com/guestbook/" rel="nofollow">网站留言</a> </div> <div class="main_footer"> <a href="https://m.zhsho.com/about/contact.html" rel="nofollow">联系永发信息网</a><br> Copyright © 2024 <a href="https://mip.zhsho.com/">永发信息网</a> 版权所有 </div> </div> <!--增加底部结束--> <mip-fixed type="gototop"> <mip-gototop threshold='100'></mip-gototop> </mip-fixed> <mip-stats-baidu token="8c103b8e3599c6e1cffa7ec987eaa84b"></mip-stats-baidu> <script src="https://c.mipcdn.com/static/v2/mip.js"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js" async="async"></script> <script src="https://c.mipcdn.com/static/v1/mip-ad/mip-ad.js" async="async"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-lightbox/mip-lightbox.js" async="async"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-nav-slidedown/mip-nav-slidedown.js" async="async"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-share/mip-share.js" async="async"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-gototop/mip-gototop.js" async="async"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-history/mip-history.js" async="async"></script> <script src="https://c.mipcdn.com/static/v1/mip-scrollbox/mip-scrollbox.js" async="async"></script> <script src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js"></script> <script src="https://mipcache.bdstatic.com/static/v1.2/mip-form.js" async="async"></script> </body> </html>