Question

I’m using jquery mobile listview and it’s working fine. In jquery list between list items i’m able to see some space which looks as a seperator. I want to seperate them with dotted line between list items instead of that space. How can i acheive this? can anyone please help me. i hope my question is clear.

Something like this:

List1
...........................
List2
...........................
List3
...........................

Thank you.

Answer 1

You can use something like this:

        .dotted-list li{
            border-style:dotted;
            border-color:#000;
        }
        .dotted-list li:first-of-type{
            border-style:solid ;
            border-color:#ff0000;
        }

        .dotted-list li:last-of-type{
            border-bottom-style:solid ;
            border-bottom-color:#ff0000;
        }

List is defined as:

      <ul data-role="listview" class="dotted-list">
        <li><a href="#">Test1</a></li>
        <li><a href="#">Test2</a></li>
        <li><a href="#">Test3</a></li>
        <li><a href="#">Test4</a></li>
        <li><a href="#">Test5</a></li>
      </ul>

A demo here – http://jsfiddle.net/wYSqk/