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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts

    How do I make each <li> appear on the same line?

    How do I create an unordered list in which each <li> appears on the same line instead of separate lines? Is there CSS code I can use? Attribute?

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    float: right/left;
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks!

  • #4
    New Coder
    Join Date
    Jan 2008
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jihanemo View Post
    How do I create an unordered list in which each <li> appears on the same line instead of separate lines? Is there CSS code I can use? Attribute?
    You should use the inline display property

    Here's a basic example of how to use it. good luck

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Inline text</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    #inline {
    width: 100px;
    height: 100px;
    }
    #inline ul {
    width: 100%;
    marin:0;
    padding:0;
    }
    #inline ul li {
    display: inline;
    list-style: none;
    float: left;
    width: auto;
    height: 30px;
    marin:0;
    padding:10px;
    
    }
    </style>
    
    </head>
    <body>
    <div id="inline">
      <ul>
        <li>inline text</li>
      </ul>
    </div>
    </body>
    </html>

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    1. height and width have no effect on inline elements.
    2. display: inline used in conjunction with vertical padding could lead to problems, though, since interpretation of how to display it is different in different browsers. The only thing that might work would be line-height but it depends on the context.
    3. list-style: none isn’t necessary on elements with display: inline since the list marker appears only on elements with display: list-item.
    4. A combined use of float and display type of “inline” isn’t of any use since float overrules the inline display (or display: inline is ignored, for that matter). The only use display: inline has while floating an element is to overcome the IE double margin bug.


    One can use the inline display if it’s simple text and/or if the list items are supposed to be centered which can then easliy be done with text-align then. If you have more advanced settings such as a navigation with graphical buttons that would be best done with floated list items.
    Last edited by VIPStephan; 11-04-2008 at 04:48 PM.


  •  

    Posting Permissions

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