How to put <li> in a flexible structure?

Question

I have a div with several ul and li inside. And the problem is they are very hard to get to fill up the space. Either they leave a big gap on the right side, or one on the uls gets pushed down below. I have to consider that different users have different sized screens.

I need to make the uls flexible, so that they will cover the space better no matter what size space it is. When the size of the window is reduced, I want the lis to adjust.

Is this possible? Any advice would be appreciated.

Ok, here is some code. You guys already gave me some ideas, let's see if the code can help:

<div style="max-width:100%">
       <ul style="list-style-type: none; display: inline-block; *display: inline; zoom: 1">

        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
            </ul>

       <ul style="list-style-type: none; display: inline-block; *display: inline; zoom: 1">
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
            </ul>
            </div>

See, I want these to sit next to each other, but then there will be a gap, and if the screen changes, the gap gets worse...

I have got bootstrap in this page, but how to utilize?

Answer 1

Well I got some assistance, thanks to all. I added the {width:25%} but for some reason they aren't all sitting in a line with each other, even though I have lowered everything to 20%, which should allow them to all be in a row...and I am wondering what will happen when the div gets smaller, maybe media queries are the way to go. But, for now, thanks to all.

Here is what I have so far:

And the jdfiddle: http://jsfiddle.net/mbQ5P

 <div style="width:100%">
               <ul style="width:20%; list-style-type: none; display: inline-block; *display: inline; zoom: 1">

            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
                </ul>

           <ul style="width:20%; list-style-type: none; display: inline-block; *display: inline; zoom: 1">
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
                </ul>
                           <ul style="width:20%; list-style-type: none; display: inline-block; *display: inline; zoom: 1">

            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
                </ul>
                           <ul style="width:20%; list-style-type: none; display: inline-block; *display: inline; zoom: 1">

            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
                </ul>
                </div>