css - li标签换行内容向后推移
本文介绍了css - li标签换行内容向后推移的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
想要的结果如上图；
但我做的结果如下图
就是在 第三段第二行的内容出格，怎么样能解决这个问题呢？
最好是页面效果能自适应，屏幕大小多少都能正常缩进~
<div>
<img src="../image/rocket.png">
<ol class="special-issues">
<li><i>01</i>欢迎涉及财务、会计、审计、税务、管理等诸多领域的文章观点。</li>
<li><i>02</i>成为财致道的作者，我们每月都会对优秀文章进行评比激励。</li>
<li><i>03</i>只有原创的文章才能通过审核，不排斥一稿多投，但我们更欢迎首发、独家的文章，并会协调 最好的位置进行推荐。枪文、软文，敬请绕道。</li>
<li/><i>04</i>请留下您的姓名、邮件、手机等联系方式，以便我们与您联系开通事宜</li>
</ol>
</div>
解决方案
其实可以把他看作左右布局来做会容易点，需要调整下代码
<style>
.special-issues{
list-style:none;
}
.special-issues li{
position:relative;
}
.special-issues li .txt{
margin-left:2em;
display:inline-block;
}
.special-issues li i{
position:absolute;
left:0;
top:0;
display:inline-block;
}
</style>
<body>
<ol class="special-issues">
<li><i>01</i><span class="txt">欢迎涉及财务、会计、审计、税务、管理等诸多领域的文章观点。</span></li>
<li><i>02</i><span class="txt">成为财致道的作者，我们每月都会对优秀文章进行评比激励。</span></li>
<li><i>03</i><span class="txt">只有原创的文章才能通过审核，不排斥一稿多投，但我们更欢迎首发、独家的文章，并会协调 最好的位置进行推荐。枪文、软文，敬请绕道。</span></li>
<li><i>04</i><span class="txt">请留下您的姓名、邮件、手机等联系方式，以便我们与您联系开通事宜</span></li>
</ol>
</body>这篇关于css - li标签换行内容向后推移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
