CSS定位：之前：之後 - 動畫步驟段落定位

我有一個動畫步驟，但在每個步驟下添加一些文本時遇到了一個主要問題。
的問題是：前：添加段落時CSS定位：之前：之後 - 動畫步驟段落定位

我嘗試不同的方法後換行：

絕對定位 - 不利於響應狀態
結束語都在UL - 不顯示良好
內聯和內嵌塊定位

我已經創建了一個類「步段」

 <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

任何幫助非常感謝！

來源

2016-11-22 felix91

的目標是什麼以後？用水平灰線排列圓圈？ – kthornbloom

add display：none to step-paragraph and it shows how how it would be – felix91

這是你的追求嗎？ http://codepen.io/anon/pen/RoVaZJ – kthornbloom

ANSWER FOUND

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

也有一些：前：定位

來源

2016-11-23 08:15:42 felix91

CSS定位：之前：之後 - 動畫步驟段落定位

回答

相關問題