I am working with a div that has a fixed width. Inside this div, there is an unordered list (ul) containing a random number of list items (li) with varying widths.
My project utilizes the Bootstrap framework.
Below is an example of the code structure:
<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>
A demonstration of the above code can be viewed on jsfiddle: http://jsfiddle.net/4dvkbtpg/2/
I am seeking a solution to have all the li elements in one row, similar to the first example, without setting a fixed width for the ul element. I do not know the exact number or width of the li elements in advance, and I must achieve this using only CSS.
I have attempted various approaches involving float:left and different display properties, but have not been able to find a suitable solution. Can anyone suggest a method to accomplish this?
For better clarity, refer to this image: