Sirence Sirence - 1 month ago 8
CSS Question

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

Answer

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

Comments