html - <li> Steps with arrows -
I'm trying to create an HTML list with an arrow between them (something like: Step 1-2- 3).
One of the results I'm trying to accomplish is:
I think the icon and content will be on the UL like this:
& lt; Ul class = "stepsCont" & gt; & Lt; Li & gt; & Lt; Img src = "icon" /> & Lt; P & gt; Content & lt; / P & gt; & Lt; / Li & gt; & Lt; / Ul & gt; .stepsCont li {display: inline; Padding: 0 30px;}
How to add arrows?
Before you : before
enter an arrow as a content image of a pseudonym , Second
, such as
Li + Lee: first {content: url (arrow.png); Display: Inline-block; Vertical-row: middle; Margin: 0 30px; }
Or you can also add an arrow as a background
li + li {background: url (arrow.png) center has no duplication Left; Padding-left: 50px; }
Coding examples :
(Both of the solutions work on IE8
.)
Comments
Post a Comment