1
Ich habe eine animierte Schritte, aber ich habe ein großes Problem beim Hinzufügen von etwas Text unter jedem Schritt.
Das Problem ist, dass die: vor,: nach Zeilenumbrüchen beim Absatz ZugabeCSS Positionierung: vor: nach - animierte Schritte Absatz Positionierung
ich verschiedene Ansätze versucht:
- Absolute Positionierung - nicht gut für ansprechenden Zustand
- alles in ul Wrapping - nicht die Anzeige gut
- Inline-und Inline-Block-Positionierung
ich eine Klasse geschaffen haben " Schritt-Absatz“
<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>
Hier ist die codepenhttp://codepen.io/felixyakubov91/pen/pNPoaW
Jede Hilfe ist sehr zu schätzen!
Positionierung Was ist das Ziel? Um die Kreise mit der horizontalen grauen Linie auszurichten? – kthornbloom
add display: none to step-paragraph und es zeigt, wie es sein soll – felix91
Ist das, was Sie wollen? http://codepen.io/anon/pen/RoVaZJ – kthornbloom