Web Analytics Made Easy -
StatCounter ul li ul li -> all on one line? - CodingForum

Announcement

Collapse
No announcement yet.

ul li ul li -> all on one line?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • ul li ul li -> all on one line?

    Hey, I got an unordered list within another unordered list like this:
    Code:
    <ul class="main">
      <li class="button">Lorem Ipsum</li>
      <li class="menu">Choose an item:
        <ul class="menu">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>...</li>
        </ul>
      </li>
    </ul>
    Now I want to use CSS to display it all one one line.
    I already managed to put the <li>s in the first layer on one line with:
    Code:
    ul.main li{
      width: auto;
      float: left;
      list-style: none; // Not required for the positioning, but I don't want the bullets
    }
    But the <li>s in ul.menu are displayed in the line below it, while I want it on the same line.

    I don't think it will be of much help, but here is the page concerned: http://101733.leerling.lekenlinge.nl...er&skin=joener

    Thanks in advance, I'd be really, really grateful if you could help me out with this one.
    Yeah that.

  • #2
    Something like this?

    You are probably looking for something like this:

    Code:
    <style>
    	
    *{
    	margin: 0;
    	padding: 0;	 
    }
    
    ul, li {
    	display: inline;
    }
    	
    ul li a {
    	display: block;
    	background: red;
    	color: white;
    	padding: 10px;	
    	float: left;
    }	
    </style>
    
    <ul class="main">
      <li class="button"><a href="#">Lorem Ipsum</a></li>
      <li class="menu"><a href="#">Choose an item:</a>
        <ul class="menu">
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">...</a></li>
        </ul>
      </li>
    </ul>
    Feel free to adjust it to fit your needs.

    Comment


    • #3
      Originally posted by Dero View Post
      You are probably looking for something like this:

      Code:
      <style>
      	
      *{
      	margin: 0;
      	padding: 0;	 
      }
      
      ul, li {
      	display: inline;
      }
      	
      ul li a {
      	display: block;
      	background: red;
      	color: white;
      	padding: 10px;	
      	float: left;
      }	
      </style>
      
      <ul class="main">
        <li class="button"><a href="#">Lorem Ipsum</a></li>
        <li class="menu"><a href="#">Choose an item:</a>
          <ul class="menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">...</a></li>
          </ul>
        </li>
      </ul>
      Feel free to adjust it to fit your needs.
      Wow... I got a reply - great!

      Anyway, the only change to the positioning you made I guess is display: inline for the <ul>s and <li>s and display: block for the <a>s. However, the only change this made was that it now no longer centers in the middle of the page...
      Yeah that.

      Comment


      • #4
        Originally posted by Vin0rz View Post
        Wow... I got a reply - great!

        Anyway, the only change to the positioning you made I guess is display: inline for the <ul>s and <li>s and display: block for the <a>s. However, the only change this made was that it now no longer centers in the middle of the page...
        Nope. Play with it, you'll figure it out!

        Save this example into a new file and try to understand the concept.

        Code:
        <style>
        	
        *{
        	margin: 0;
        	padding: 0;	 
        }
        
        body {
        	text-align: center;
        }
        
        ul {
        	margin: 0 auto;
        	width: 600px;
        }
        
        ul ul, li {
        	display: inline;
        	width: auto;	
        }
        	
        ul li a {
        	display: block;
        	background: red;
        	color: white;
        	padding: 10px;	
        	float: left;
        }	
        </style>
        
        <ul class="main">
          <li class="button"><a href="#">Lorem Ipsum</a></li>
          <li class="menu"><a href="#">Choose an item:</a>
            <ul class="menu">
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
              <li><a href="#">...</a></li>
            </ul>
          </li>
        </ul>

        Comment


        • #5
          What the #$%^&*(! It works! Wow, great, thanks a lot!
          Yeah that.

          Comment


          • #6
            Originally posted by Vin0rz View Post
            What the #$%^&*(! It works! Wow, great, thanks a lot!
            You're welcome.

            Comment


            • #7
              Originally posted by Dero View Post
              You're welcome.
              Wait... I see why yours worked and mine didn't: you asssume "Choose an item" is also a link, but it isn't. Do you know any way I can still put it in line with the rest?
              Yeah that.

              Comment


              • #8
                Originally posted by Vin0rz View Post
                Wait... I see why yours worked and mine didn't: you asssume "Choose an item" is also a link, but it isn't. Do you know any way I can still put it in line with the rest?
                Sure, just enclose the text into <span> and set
                Code:
                ul li span {
                  float: left;
                  ...
                  ...
                  ...
                }

                Comment


                • #9
                  Originally posted by Dero View Post
                  Sure, just enclose the text into <span> and set
                  Code:
                  ul li span {
                    float: left;
                    ...
                    ...
                    ...
                  }
                  I figured that out too, but is there also a way to do it with the HTML already available?

                  If not - too bad, I'm already glad that at least it is possible.
                  Yeah that.

                  Comment

                  Working...
                  X