How to adjust ul width property?

Question

<ul id='ul01'>
    <li><a href='#'><img src='img01.png' width="700" height="590" /></a></li>
    <li><a href='#'><img src='img02.png' width="700" height="590" /></a></li>
    <li><a href='#'><img src='img03.png' width="700" height="590" /></a></li>
</ul>

CSS:

#ul01{list-style:none;width:??;}
#ul01 li{float:left;}

This is a horizontal array of images. list.items.count can vary.
What should be the width property to fit all images.
I tried with - auto - and expected resizible width - but it's not.

Answer 1

Make the li elements inline-blocks and set the white-space property of the ul to nowrap.

li {
    display: inline-block;
}
ul {
    white-space: nowrap;
}