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: Enter image details here

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

  • to , 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

    Popular posts from this blog

    import - Python ImportError: No module named wmi -

    Editing Python Class in Shell and SQLAlchemy -

    c# - MySQL Parameterized Select Query joining tables issue -