Spacing in <li> Lists

RichieW13

10-20-2010, 09:50 PM

I have a list on this page: http://thebannerisup.district37ama.org/overalls/overall-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 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?

<body>

<h>This is a list, but I want the numbers spaced out to the right.</h>
<ol>
<li>Dan Smith57</li>
<li>J.N. Roberts33</li>
<li>Larry Bergquist27</li>
<li>Mike Patrick27</li>
<li>Mike Childress25</li>
<li>Danny Hamel25</li>
<li>Paul Krause 22</li>
</ol>

<h>This is a table, but I want the list numbers on the left.</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:ol#float { }
ol#float li { width: 120px; }
ol#float li span { float: right; }

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

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

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

HTML:<ol id="position">
<li>Dan Smith57</li>
<li>J.N. Roberts33</li>
<li>Larry Bergquist27</li>
<li>Mike Patrick27</li>
<li>Mike Childress25</li>
<li>Danny Hamel25</li>
<li>Paul Krause 22</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.

<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:ol#position { }
ol#position li {
width: 120px;
position: relative;
}
ol#position li span {
position: absolute;
right: 0;
text-align: right;
}

This did it. Thanks!