将元素与动态大小并排对齐

Question

这就是：我正在创建一个纯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;

}

提前感谢您提供的任何帮助！

Answer 1

这是因为你给出了100％的高度和宽度：  img, a { width: 100%; height: 100%; }

你必须将img标签的高度和宽度50％仅作为：

img{ width: 50%; height: 50%;}

所以现在图像将加起来100％宽的父cotainer。如果您使用2个以上的图像，则相应地进行数学运算。

希望能解决你的问题。

Answer 2

尝试将white-space: nowrap;添加到滑块：

.slider {
    width: 560px;
    height: 560px;
    margin: 0 auto;
    white-space: nowrap;
}

演示：http://jsfiddle.net/9uF2b/1/