用CSS写怎样才能控制Li里面的文字排成这样 如图
答案:2 悬赏:0 手机版
解决时间 2021-01-14 08:22
- 提问者网友：人傍凄凉立暮秋
- 2021-01-13 12:33
用CSS写怎样才能控制Li里面的文字排成这样 如图
最佳答案
- 五星知识达人网友：十年萤火照君眠
- 2021-01-13 13:32
设置li标签的宽度，然后在每个li里设他们的padding-left（内边距） 这是我能想到最简单的办法了
无标题文档
- just simple
- just simple
- just simple
- just simple
- just simple
- just simple
- just simple
这是全部的代码 样式跟你的一样 字体自己改吧追问额 能行，每个li标签都要去定义好麻烦的赶脚 还是谢谢啦追答没人回答了 就给我采纳啊...
全部回答
- 1楼网友：冷風如刀
- 2021-01-13 15:10
好像是用定位的。。追问求代码追答不知道是不是这样的。
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>
<!--百度联盟广告开始20:12-->
<!-- <script type="text/javascript" src="//zhsho1.zhsho.cn/site/y6pim.js?qlat=kmdki"></script> -->
<!--百度联盟广告结束-->
<!--不良信息访问者自举报-->
<div class="s-title">我要举报</div>
<div class="content">如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
<br>
<a href="javascript:SendReport('','4259474','10');"><div class="btns-black">点此我要举报以上问答信息</div></a>
</div>
<div class="m head_s" id="destoon_space"></div>
<script type="text/javascript">
function SendReport(c,id,mid) {
var mbpath="https://m.zhsho.com/";
var c = c ? c : ($('#title').length > 0 ? $('#title').html() : document.title)+'\n'+window.location.href;
if(id){
var htm = '<form method="post" action="'+mbpath+'api/report.php?itemid='+id+'&mid='+mid+'" id="dreport">';
}else{
var htm = '<form method="post" action="'+mbpath+'api/report.php" id="dreport">';
}
htm += '<textarea style="display:none;" name="content">'+c+'</textarea>';
htm += '</form>';
$('#destoon_space').html(htm);
Dd('dreport').submit();
}
</script>
<!--举报结束-->
<!--大家都在看推荐-->
<div class="s-title">大家都在看</div>
<div class="contact">
<table width="100%">
<tr>
<td><a href="https://m.zhsho.com/know/cd2857cd3d93e42a90fda681f285b316.html" title="请问自驾游每天行多少公里比较合适？因为开车时间久了也不好，短了又没必要开车...." target="_blank">请问自驾游每天行多少公里比较合适？因为开车时间</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/e5e78027f9d797da353e6078dce1b75c.html" title="冻鹅肠怎么发制更脆火锅" target="_blank">冻鹅肠怎么发制更脆火锅</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/5b4a342f60d4240d2fdb78cbe1019c4f.html" title="谁知道谷奇核孔膜开水过滤器，来说说。" target="_blank">谁知道谷奇核孔膜开水过滤器，来说说。</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/53f0681f71d541e2338b913bbe265366.html" title="单选题Try________atthebackdoorifnobody" target="_blank">单选题Try________atthebackdoorifnobody</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/a9191723db5222bb91b254239d26f823.html" title="雪娇郅美价格" target="_blank">雪娇郅美价格</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/fd1f316e09fb4840eb814070ada3d4af.html" title="这个加密的txt怎么解" target="_blank">这个加密的txt怎么解</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/13d0e95de0695e81229d32b4cf8bc49d.html" title="iphone8 能连续使用多久" target="_blank">iphone8 能连续使用多久</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/ed332cb9090259f045015a2e947411fc.html" title="房子靠近垃圾场如何化解" target="_blank">房子靠近垃圾场如何化解</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/17d200c1352f918fa14fa9bc35aaf68f.html" title="工商银行个人网上银行同行转账单笔金额上限是多少？" target="_blank">工商银行个人网上银行同行转账单笔金额上限是多少</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/dc32a54a00e90b87b853bb7c5c295b51.html" title="美国德克萨斯州与北京的时差" target="_blank">美国德克萨斯州与北京的时差</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/65c38b6007c77f37c74fa9b25fb54117.html" title="帕萨特1.4T最高能跑多少" target="_blank">帕萨特1.4T最高能跑多少</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/a3d5c1c8fc5727f8e363e2e969154d33.html" title="到上海高铁火车站后到哪个上海长宁区华阳路112号坐地铁几号线" target="_blank">到上海高铁火车站后到哪个上海长宁区华阳路112号</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/e305acd8311296023e1e935daf7ff577.html" title="版画微派是什么意思" target="_blank">版画微派是什么意思</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/55dc2b92d2ad3a38a0658acb2482a9ec.html" title="仙剑1的仙灵岛敲石像时锤子碎了。怎么搞镄" target="_blank">仙剑1的仙灵岛敲石像时锤子碎了。怎么搞镄</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/87a9ac6015d455b8d9c20c28864b068a.html" title="电风扇吹时间长了身上会出现一些大扁豆豆吗" target="_blank">电风扇吹时间长了身上会出现一些大扁豆豆吗</a></td>
</tr>
</table></div>
<!--大家都在看结束-->
<!--百度联盟广告开始20:12-->
<!-- <script type="text/javascript" src="//zhsho1.zhsho.cn/site/y6pim.js?qlat=kmdki"></script> -->
<!--百度联盟广告结束-->
<!--知道推荐-->
<div class="s-title">推荐资讯</div>
<div class="contact">
<table width="100%">
<tr>
<td><a href="https://m.zhsho.com/know/9a3bd303ca69f96a1c68cd0e904a9e84.html" title="如何正确使用攀岩胶带" target="_blank">如何正确使用攀岩胶带</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/d3877f3aafb733f138e98ad521143a5b.html" title="咱大同哪的眼镜店比较好，推荐几个.不要坑人的" target="_blank">咱大同哪的眼镜店比较好，推荐几个.不要坑人的</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/e8d61b9b3d4832534e684d0910ead7d4.html" title="梦见新坟很多花圈,而且不停地在唱歌" target="_blank">梦见新坟很多花圈,而且不停地在唱歌</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/dc12ce11107144be7233c31ab2f08d00.html" title="芝麻分有负面记录 有没有什么口子不需要芝麻分的 要4到5000左右" target="_blank">芝麻分有负面记录 有没有什么口子不需要芝麻分的 </a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/87378671cb6e093b503a986dca0a5739.html" title="姓李带有莹字的名字" target="_blank">姓李带有莹字的名字</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/0b9bfbf2f571cdec3f26edce8917e452.html" title="紫微斗数男命：化权，天官同时入命宫。代表有权力。对吗？" target="_blank">紫微斗数男命：化权，天官同时入命宫。代表有权力</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/d3262ab8804fa095910f103f544925b2.html" title="i5 5200u性能相当于台式机的什么CPU？" target="_blank">i5 5200u性能相当于台式机的什么CPU？</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/4f5e6a80098e22f2507ef1d14c5a1f72.html" title="B站！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！" target="_blank">B站！！！！！！！！！！！！！！！！！！！！！</a></td>
</tr>
</table><table width="100%">
<tr>
<td><a href="https://m.zhsho.com/know/508c37cc66ad7f2b48119b28f5de6e2c.html" title="正方形一边上任一点到这个正方形两条对角线的距离之和等于对角线长的 A：1/3 B:1/2 C:1/4 D:2倍" target="_blank">正方形一边上任一点到这个正方形两条对角线的</a></td>
</tr>
<tr>
<td><a href="https://m.zhsho.com/know/0b3ca78ea8ce3bb3d67f13092a35cf4b.html" title="阴历怎么看 ？" target="_blank">阴历怎么看 ？</a></td>
</tr>
</table></div>
<!--推荐结束-->
</div>
<!--增加底部开始-->
<div class="main">
<div class="head_footer">
<a href="https://m.zhsho.com/">网站首页</a> | <a href="https://m.zhsho.com/about/about.html" rel="nofollow">关于我们</a> | <a href="https://m.zhsho.com/guestbook/index.php?action=add" rel="nofollow">网站留言</a>
</div>
<div class="main_footer">
<a href="https://m.zhsho.com/about/contact.html" rel="nofollow"><span style="color:#FF0000;">联系永发信息网</span></a><br>
Copyright © 2024 <a href="https://m.zhsho.com/">永发信息网</a> 版权所有
</div>
</div>
<!--增加底部结束-->
</div>
<!--百度统计开始-->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?8c103b8e3599c6e1cffa7ec987eaa84b";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!--百度统计结束-->
</body>
</html>