SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Unordered List

Hybrid View

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Unordered List

    Dumb question for the day...

    If I have an unordered list like this...

    Code HTML4Strict:
    <ul id="nav">
    	<li><a href="#">Men's</a></li>
    	<li><a href="#">Women's</a>
    	<li><a href="#">Boys'</a>
    	<li><a href="#">Girls'</a>
    </ul>

    Then why does it display like this...

    Men's Women's Boys' Girls'

    And not like this...

    Men's
    Women's
    Boys'
    Girls'

    Debbie

  2. #2
    From space with love silver trophy
    SpacePhoenix's Avatar
    Join Date
    May 2007
    Location
    Poole, UK
    Posts
    5,000
    Mentioned
    101 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <ul id="nav">
        <li><a href="#">Men's</a></li>
        <li><a href="#">Women's</a></li>
        <li><a href="#">Boys'</a></li>
        <li><a href="#">Girls'</a></li>
    </ul>
    You was missing the </li> at the end of each list item after the first one
    Community Team Advisor
    Forum Guidelines: Posting FAQ Signatures FAQ Self Promotion FAQ
    Help the Mods: What's Fluff? Report Fluff/Spam to a Moderator

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SpacePhoenix View Post
    HTML Code:
    <ul id="nav">
        <li><a href="#">Men's</a></li>
        <li><a href="#">Women's</a></li>
        <li><a href="#">Boys'</a></li>
        <li><a href="#">Girls'</a></li>
    </ul>
    You was missing the </li> at the end of each list item after the first one
    Thanks, but that's called a copy and paste error.

    It doesn't answer the behavior I'm seeing.


    Debbie

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You was missing the </li> at the end of each list item after the first one
    ...and those incomplete list items were not being rendered. The reason they appeared inline was because the anchors were being rendered.

    By default, anchors are inline elements, hence they are rendered as display:inline;

    By default, an LI is rendered as display:list-item; which generates a principal block box and a marker box.
    Block boxes (other than inline-block) will stack one upon another.

    Thanks, but that's called a copy and paste error.
    It doesn't answer the behavior I'm seeing.
    If you are still seeing them appear beside each other then you have either floated them or set them as display:inline; via CSS.

    An un-styled UL will stack as seen in your second description

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Display:list-item</title>
    </head>
    <body>
     
    <ul id="nav">
        <li><a href="#">Men's</a></li>
        <li><a href="#">Women's</a></li>
        <li><a href="#">Boys'</a></li>
        <li><a href="#">Girls'</a></li>
    </ul>
     
    </body>
    </html>

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ...and those incomplete list items were not being rendered. The reason they appeared inline was because the anchors were being rendered.
    I know you said it was a typo, but actually the browsers were rendering them all as blocks even when the closing </li> was missing on the lower three. They must have been self closing the LI.

    You must have styles applied to them if they are sitting beside one another.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I know you said it was a typo, but actually the browsers were rendering them all as blocks even when the closing </li> was missing on the lower three. They must have been self closing the LI.
    That was my guess.

    Yes, it was a posting type-o.


    You must have styles applied to them if they are sitting beside one another.
    It is the float: left; that causes the side by side.

    I knew that in retrospect.

    Told you I was being dumb!

    Thanks,


    Debbie

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Rayzur,

    So if I have a nested list like this...

    Code:
    <ul id="nav">
    	<li><a href="#">Men's</a></li>
    		<ul>
    			<li><a href="#">Suits</a></li>
    			<li><a href="#">Shirts</a></li>
    			<li><a href="#">Ties</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Women's</a>
    		<ul>
    			<li><a href="#">Dresses</a></li>
    			<li><a href="#">Coats</a></li>
    			<li><a href="#">Lingerie</a></li>
    		 </ul>
    	</li>
    </ul>
    and because I have float: left; on the out list, but no styling on the inner list then I get somethings that looks like this...

    Code:
    Men's		Women's
    Suits		Dresses
    Shirts		Coats
    Ties		Lingerie
    That is because the float puts them in the same line and the "block" effect makes the inner list sit on a new line for each item, right?


    Debbie

  8. #8
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,220
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    that code is just for demonstration purposes with regard to the LI behaviour, right?

    i mean, you don't actually send all those links to href="#", do you?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,761
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    that code is just for demonstration purposes with regard to the LI behaviour, right?

    i mean, you don't actually send all those links to href="#", do you?
    Yes, that is an academic example.

    I do use "#" while I'm getting my CSS to work.


    Debbie

  10. #10
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to display horizontally use
    Code:
    display:inline
    for vertical use
    Code:
    display: block


Bookmarks

Posting Permissions

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