Web Analytics Made Easy -
StatCounter How to change line - CodingForum

Announcement

Collapse
No announcement yet.

How to change line

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

  • How to change line

    Hello,

    i have the following code but it shows the list items into the next line. How can i change the code in order to change line when it shows all the list items?

    Code:
    #upMenu ul{
    list-style-type:none;
    padding:0;
    margin:0;
    }
    #upMenu li{
    float:right;
    padding-right:1em;
    }
    Thank you in advance.
    Last edited by dealwi8me; Aug 19, 2011, 07:20 AM.

  • #2
    Try adding:
    Code:
    display: inline;

    Comment


    • #3
      Your CSS is a little off, too. the equals sign (=) is not valid, so your padding and margin on the ul isn't correct. It should be:

      Code:
      padding: 0;
      margin: 0;
      WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

      Comment


      • #4
        @ravi9 thanks for the quick answer but I see no difference when i add this line to my code. I'm still getting the #upMenu div items in the same line as following div.

        @resdog thanks for the correction!

        Comment


        • #5
          Correct your

          Code:
          #upMenu ul {
          list-style-type:none;
           padding=0;
           margin=0;
           }
           #upMenu li {
           float:right;
           padding-right:1em;
           }
          It should be : instead of =

          For your issue, set width of each list-item according to it's parent element.

          For example, If your list-item container's width is 600px and you have 6 items to be listed horizontally, then width of each list-item should 100px maximum (including margin, padding, border)




          Last edited by vikram1vicky; Aug 19, 2011, 04:18 AM.

          Comment


          • #6
            Originally posted by ravi9 View Post
            Try adding:
            Code:
            display: inline;
            Originally posted by vikram1vicky View Post
            Correct your

            Code:
            #upMenu ul {
            list-style-type:none;
             padding=0;
             margin=0;
             }
             #upMenu li {
             float:right;
             padding-right:1em;
             }
            It should be : instead of =

            For your issue, set width of each list-item according to it's parent element.

            For example, If your list-item container's width is 600px and you have 6 items to be listed horizontally, then width of each list-item should 100px maximum (including margin, padding, border)




            I used height instead of width and worked.

            Thanks!

            Comment

            Working...
            X