0

Sorry for the noob question but i am at this for several hours now.

I am trying to create a unordered list that the <li> floating left. and the window's width is set.

The issue is when there is too many <li> it wont add scrolling instead it will put the <li> that dont fit in another line

here is an example:

<ul id="someUL">
    <li> whatever </li>
    <li> whatever </li>
    <li> whatever </li>
</ul>

Well actually better show on fiddle.

Here is an example of what i mean in http://jsfiddle.net/eSckg/1/

My question how do i go about doing that ?

4

2 回答 2

0

Try this...

<style>
#someDIV{
    width:200px;  
    overflow-x:scroll;
    overflow-y:hidden;
    height:40px;
    padding:10px; 
}
#someUL{
    background:orange; 
    height:20px; 
    /* 3 li width=80*3=240px */
    width:240px;
}

#someUL li{ 
    list-style:none; 
    float:left; 
    background:white; 
    margin:0px 10px;
    width:60px;
    /* the width of each li is 60+10+10=80px */
}
</style>
<div id="someDIV">
<ul id="someUL">
    <li> whatever </li>
    <li> whatever </li>
    <li> whatever </li>
</ul>
</div>
于 2013-11-15T02:00:02.797 回答
0

You need to increase the width of #someUL.

updated fiddle

于 2013-11-15T02:00:31.970 回答