Spacing in <li> Lists

RichieW13 · 10-20-2010, 09:50 PM

I have a list on this page: http://thebannerisup.district37ama.o...main-new.shtml

I want to create space between the names and the numbers, so that the numbers all line up in a column to the right of the names.

For some reason I thought the <span> tag was supposed to solve the problem.

How do I create an ordered list, where there is essentially a second column spaced out to the right?

Code:

<body>


<h><u>This is a list, but I want the numbers spaced out to the right.</u></h>
<ol>
<li>Dan Smith<span>57</span></li>
<li>J.N. Roberts<span>33</span></li>
<li>Larry Bergquist<span>27</span></li>
<li>Mike Patrick<span>27</span></li>
<li>Mike Childress<span>25</span></li>
<li>Danny Hamel<span>25</span></li>
<li>Paul Krause <span>22</span></li>
</ol>

<h><u>This is a table, but I want the list numbers on the left.</u></h>
<table>
<tr><td>Dan Smith</td><td>57</td></tr>
<tr><td>J.N. Roberts</td><td>33</td></tr>
<tr><td>Larry Bergquist</td><td>27</td></tr>
<tr><td>Mike Patrick</td><td>27</td></tr>
<tr><td>Mike Childress</td><td>25</td></tr>
<tr><td>Danny Hamel</td><td>25</td></tr>
<tr><td>Paul Krause </td><td>22</td></tr>
</table>
</body>

kansel · 10-20-2010, 10:31 PM

You could do it with the span tags but you will need to add some CSS to make it work.

Here is a solution using floats. Note that for the float to be effective, the span must precede the name.

CSS:

Code:

ol#float {  }
ol#float li { width: 120px; }
ol#float li span { float: right; }

HTML:

Code:

<ol id="float">
<li><span>57</span>Dan Smith</li>
<li><span>33</span>J.N. Roberts</li>
<li><span>27</span>Larry Bergquist</li>
<li><span>27</span>Mike Patrick</li>
<li><span>25</span>Mike Childress</li>
<li><span>25</span>Danny Hamel</li>
<li><span>22</span>Paul Krause </li>
</ol>

Here is a solution using positioning. The HTML is unmodified from your version.

CSS:

Code:

ol#position {  }
ol#position li { 
    width: 120px; 
    position: relative;
}
ol#position li span { 
    position: absolute; 
    right: 0; 
    text-align: right; 
}

HTML:

Code:

<ol id="position">
<li>Dan Smith<span>57</span></li>
<li>J.N. Roberts<span>33</span></li>
<li>Larry Bergquist<span>27</span></li>
<li>Mike Patrick<span>27</span></li>
<li>Mike Childress<span>25</span></li>
<li>Danny Hamel<span>25</span></li>
<li>Paul Krause <span>22</span></li>
</ol>

And of course there is the option of using a table as in your second example. This is of course tabular data (the numbers in the right column relate to the names in each row), however you would have to enter the index numbers in the left column by hand.

You would probably want to add some CSS for padding and to make the numbers align how you want.

Code:

<table>
<tr><td>1.</td><td>Dan Smith</td><td>57</td></tr>
<tr><td>2.</td><td>J.N. Roberts</td><td>33</td></tr>
<tr><td>3.</td><td>Larry Bergquist</td><td>27</td></tr>
<tr><td>4.</td><td>Mike Patrick</td><td>27</td></tr>
<tr><td>5.</td><td>Mike Childress</td><td>25</td></tr>
<tr><td>6.</td><td>Danny Hamel</td><td>25</td></tr>
<tr><td>7.</td><td>Paul Krause </td><td>22</td></tr>
</table>

RichieW13 · 10-20-2010, 11:17 PM

Here is a solution using positioning. The HTML is unmodified from your version.

CSS:

Code:

ol#position {  }
ol#position li { 
    width: 120px; 
    position: relative;
}
ol#position li span { 
    position: absolute; 
    right: 0; 
    text-align: right; 
}

This did it. Thanks!