CSS定位：之前：之后 - 动画步骤段定位

Question

我有一个动画步骤但是在每个步骤下添加一些文本时我遇到了一个主要问题。
问题是：在添加段落

之后的换行符之前：

我尝试了不同的方法：

• 绝对定位 - 对响应状态不利
• 将它全部包裹在ul中 - 不能很好地显示
• 内联和内联块定位

我创建了一个“step-paragraph”类

        <ul class="steps">
      <li class="step step-incomplete step-active"> 
        <span class="step-icon"></span><span class="span-label">Step 1</span>
      <p class="step-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </li>
      <li class="step step-incomplete step-inactive"> 
        <span class=" step-icon"></span><span class="span-label">Pass the test</span></li>
     <li class="step step-incomplete step-inactive"> 
       <span class=" step-icon"></span><span class="span-label">Start earning</span></li> 
    </ul>

以下是codepen http://codepen.io/felixyakubov91/pen/pNPoaW

非常感谢任何帮助！

Answer 1

找到答案

.step-paragraph {text-align:left;margin:10px 5px;
 max-width:300px; display:inline-block;}

还有一些：之前，：定位后