designing list with CSS

Question

Hi all, i am looking for a way to prevent a horizontal, inline unordered list from breaking into seperate lines once contained inside a element with specific width (shorter than the list). the element has "overflow" set to "hidden".

the only way i found to create that effect is by giving a specific width to the "UL" element but now, i have to create that effect for a list with unknown width!! (user can add items to list). is there any other way? it would help me so much!!

thank you all

Answer 1

Have you tried to add "white-spacing: nowrap" to the UL? That might work out: http://www.w3schools.com/CSS/pr_text_white-space.asp

Answer 2

try this piece of code to display list item

#list   {
        width:476px;
        height:40px;
        margin-top:40px;
        float:right;
    }

    #list ol    {
        padding:0;
        margin:10px 0px 0px 27px;
        float:left;
        display:inline;
    }

    #list li    {
        padding:0;
        margin:0;
        display:inline;
        float:left;
    }

Answer 3

try this:

ul.one-liner { white-space: nowrap; }
ul.one-liner li { display: inline }

Answer 4

[See it in action]

#container {
  width: 100px; /* container's specific width */
  position: relative; 
  overflow: hidden;  
}

ul { 
  position: absolute;
  list-style-type: none; 
  width: 10000px;
}

ul li { 
  display: inline;
}