li标签换行内容向后推移

发布于
2016-06-02

图片描述

想要的结果如上图；
但我做的结果如下图
图片描述

就是在第三段第二行的内容出格，怎么样能解决这个问题呢？
最好是页面效果能自适应，屏幕大小多少都能正常缩进~

            <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>

css html

html5 css3

阅读 6.4k

5 个回答

PiLee

✓ 已被采纳

其实可以把他看作左右布局来做会容易点，需要调整下代码

<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>