Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Spacing in <li> Lists

    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>

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    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>

  • Users who have thanked kansel for this post:

    RichieW13 (10-20-2010)

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •