Совместите элементы рядом с динамическим размером

Вот что: я создаю полный полноэкранный слайд слайдера JavaScript, и у меня небольшие проблемы с позицией моих элементов.

Размер изображения должен быть динамическим, потому что он должен соответствовать каждому экрану. Мне нужны все элементы, выровненные бок о бок, поэтому я могу анимировать слайдер с левым/правым эффектом.

Здесь моя проблема: я не могу выровнять эти элементы. Они просто стоят вертикально один под другим.

Мне действительно нужны эти изображения со 100-процентным размером, но я не могу выровнять их бок о бок. Если я установил незначительный процент (меньший, чем размер родителя), или если я установил статическое значение, они будут стоять так, как я хочу.

Что мне нужно сделать здесь?

Вы можете найти живой пример здесь http://jsfiddle.net/9uF2b/

Вот некоторые из моего кода:

<div class="wrap">
    <div class="slider">
        <div class="container" id="container">
            <ul>
                <li class="active">
                    <a href="/teste/">
                        <img src="img/1.jpg" alt="teste alt">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/2.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS:

.wrap {
width: 100%;
height: 100%;
}

.slider {
width: 560px;
height: 560px;
margin: 0 auto;
}

#container {
width: 100%;
height: 100%;
// overflow: hidden;
}

img, a {
width: 100%;
height: 100%;
}

li {
display: inline;
}

ul {
margin: 0px;
padding: 0px;

}

Заранее благодарим за любую помощь, которую вы можете предоставить!