HTML and CSS   XSLT   JavaScript   Images   Soft   Etc  
Vladimir Tokmakov

Line-separated lists January 2004


Task:

Separate list items using horizontal lines.

How it looks in the browser

  • item 1
  • item 2
  • item 3
01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
<style type="text/css">
    ul.line-separated
    {
        background-color: blue;
        padding: 0;
        margin-left: 1em;
    }
    ul.line-separated li
    {
        background-color: white;
        margin: 1px 0 0 0;
        padding: 0;
        list-style-type: none;
    }
</style>
<ul class="line-separated">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

Order a design...