CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rence
Rence

Reputation: 2950

CSS only - how to have a scrolling ul with all li on one line

I have a div with a fixed width. Inside is an ul. The ul has a random amount of li children, with varying widths.

I use bootstrap.

Here is an example:

<div class="parent">
    <div class="child">    
        <ul id="inner" class="nav nav-tabs">
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>         
    </div>  
</div>

<div class="parent">    
   <div class="child">        
        <ul id="inner-new" class="nav nav-tabs">
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>        
    </div> 
</div>

<style>
.parent {
    background: green;
    width: 200px;
    padding: 20px;
    overflow: hidden;
    display: inline-block;
}

.child {
    background: white;
    padding: 10px;
    overflow: auto;
}

li {
    padding: 30px;
}

#inner {
    background: yellow;
    padding: 10px;
    width: 500px;
}

#inner-new {
    background: yellow;
    padding: 10px;
    width: auto;
}
</style>

Here is a fiddle with above code:

http://jsfiddle.net/4dvkbtpg/2/

Is there a way to have the li's all in one row (like it is in the first example) but without giving the ul a fixed width? Since I don't know how many li's there will be or what width any of them will be, I can't add use fixed widths. I can also only use CSS for this.

I tried various things with float:left and different display styles, but I couldn't figure it out. Does anyone know of a way to accomplish this?

Here is a little picture, to make it clearer (hopefully!) http://i.imgur.com/Qz9eUD2.png

Upvotes: 1

Views: 3414

Answers (6)

racz_gabor
racz_gabor

Reputation: 279

I changed a little bit of your code, the main problem was (I think) that the bootstrap is giving the li a float:left; and a display:block, so I changed that to display: inline-block; and removed the float, and added the list-style: none to li, white-space: nowrap; and overflow-y: hidden; maybe this is what you want. 

.parent {
    background: green;
    width: 200px;
    padding: 20px;
    overflow: hidden;
    display: inline-block;
}

.child {
    background: white;
    padding: 10px;
    overflow: auto;
}

li {
    padding: 30px;
    list-style: none;
    display: inline-block !important;
    float: none !important;
}

#inner {
    padding: 10px;
    white-space: nowrap;
    overflow-y: hidden;
    background: yellow;
}

#inner-new {
    background: yellow;
    padding: 10px;
    width: auto;
}

Upvotes: 0

yip102011
yip102011

Reputation: 877

I think i know what you want, i used to stuck in same problem. Don't use ul and li. check this demo or below code

.wrapper{
    width:200px;
    white-space: nowrap;
    overflow:auto;
}

.wrapper span{
  display: inline-block;
  line-height: 50px;
  margin: 0px 5px;
  padding: 0px 5px;
  border: 1px solid;
}
<div>
   <p class="wrapper">
       <span>Child 1</span>
       <span>Child 2</span>
       <span>Child 3</span>
       <span>Child 4</span>
       <span>Child 5</span>
       <span>Child 6</span>
   </p>
</div>

Upvotes: 0

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2121

you just need Following changes with #inner class

-Add this properties

max-height: 150px; //set the maximum width of particulate div above that height scroll bar will shown overflow-y: auto; // allowing the scroll after what maximum height has been set to the particular div or element.

Remove this properties

width : 500px; // this will set the div's width to 500 px and the parent class is having the "display : inline-block" property so this property will extended automatically to the child class so here may you can change one of them as per your choice..

.parent {
    background: green;
    width: 200px;
    padding: 20px;
    overflow: hidden;
    display: inline-block;
}

.child {
    background: white;
    padding: 10px;
    overflow-y: auto;
}

li {
    padding: 30px;
}

#inner {
  background: yellow;
  padding: 10px;
  /* width: 500px; */
  /* max-width: 200px; */
  overflow-y: auto;
  max-height: 150px;
}

#inner-new {
    background: yellow;
    padding: 10px;
    width: auto;
}

you can check whether you are searching about this or else. you can set max-height with whatever you want

Upvotes: 0

priya786
priya786

Reputation: 1834

please check this demo

.parent1{
width:100%;
}

then You please check this demo

if i understand you i think you want something like this another demo

according to your image final demo

Upvotes: 2

Federico
Federico

Reputation: 1251

Just remove the width (width: 200px;) from the class ".parent".

Upvotes: 0

SVK
SVK

Reputation: 2197

Check this update link:

http://jsfiddle.net/4dvkbtpg/3/

Css code:

.parent {
    background: green;
    width: 200px;
    height:400px;
    padding: 20px;
    overflow: scroll;
    display: inline-block;
}

Upvotes: 0

Related Questions