Need help with small css inline lists problem

Discussion in 'CSS' started by roknrolltkovr, Apr 19, 2010.

  1. #1
    Hey all,

    I'm got a basic grasp of css but am having trouble recreating this:

    [​IMG]

    I can style everything just fine, but I can't get each location/phone number pair to sit next to each other. I can only get them to sit on top of each other. I've tried every way I know how but I'm really just guessing in the dark. If anyone has any idea I'd appreciate it, thanks!
     
    roknrolltkovr, Apr 19, 2010 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Use a table:
    
    <html>
    <body>
    <table cellspacing='5px'>
    	<tr><td>East Valley</td><td>West Valley</td><td>Phoenix</td></tr>
    	<tr><td>480-555-1234</td><td>623-555-1234</td><td>602-555-1234</td></tr>
    </table>
    </body>
    </html>
    
    HTML:
    Or an inline list:
    
    <html>
    <style type='text/css'>
    <!--
    	li { float:left; list-style-type: none; padding: 10px;}
    -->
    </style>
    <body>
    <ul>
    	<li>East Valley<br />480-555-1234</li>
    	<li>West Valley<br />623-555-1234</li>
    	<li>Phoenix<br />602-555-1234</li>
    </ul>
    </body>
    </html>
    
    HTML:
    I'm still learning this stuff, so there maybe better ways of doing it :)
     
    Cash Nebula, Apr 19, 2010 IP
  3. mps705

    mps705 Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Set the list style to 'none' for your ul:

    ul {list-style:none;}
    Code (markup):
     
    mps705, Apr 27, 2010 IP