Jquery 需要将图像水平列出，而不是垂直列出

我正在尝试创建一个非常简单的jquery滑块，而不是使用数百万个滑块中的一个。所以我几乎完成了，但我有一个问题。我正在使用jquery的动画来移动图像，我需要在同一水平线上显示所有图像，以使脚本正常工作。现在，它们是垂直排列的，我已经思考了两个小时了。下面是HTML：

<div id="gallery-wrap">
<div id="gallery">
    <img class="galleryimage" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
</div>
<div id="gallery-controls">
<a id="gallery-prev" href="#"><img alt="" /> </a>
<a id="gallery-next" href="#"><img alt="" /></a></div>
</div>
<div style="clear: both;"></div>

以及jquery：

这里有一张图片展示了目前图像是如何呈现的，以防我解释错了，英语不是我的第一语言：

---

我尝试过显示：内联而不走运。

使用

float:left

而不是

display:inline

来强制内联流而不丢失大小调整功能

这是一个：

如果要强制其不使用窄浏览器窗口进行换行，请将固定宽度设置为库，如下所示：

#图库
{
宽度：1500px；
}

您正在使用的是

#gallery li img{display:inline；}

而是应用

display:inline

到该

#gallery li

并将其从

#gallery li img

#gallery li{width://*这里是一些width*/；height:300px；float:left；display:inline；}

不要用图像的宽度和li元素作为100%，看看这个

---

我看到了您页面的源代码，假设您需要在单个水平行中显示所有图像，为

元素设置一个宽度，并在文本段落之前使用

清除浮动。

您可以让图像的容器

 $(document).ready(function(){ 

    $("#gallery-prev").click(function(){
  $(".galleryimage").animate({"left": "-=100%"}, "slow");
});

$("#gallery-next").click(function(){
  $(".galleryimage").animate({"left": "+=100%"}, "slow");
});

});

---

正如我在这个问题上所回答的那样，我做到了，但它什么也没做。@ChristianNikkanen。看看我答案中的例子。它是有效的。页面有固定的宽度，所以如果我使用百分比，它是页面固定宽度的百分比值。没有帮助，这样做了，删除了浮动：左；部分，但看起来仍然一样。这是你的小提琴所做的。调整宽度，如果你想要图片下方的文本，请在你的图库后使用一个清除补丁来清除它，因为你使用的是浮动。文本是应该显示在滑块下方的内容。。。我希望图像在同一水平线上，当它们在同一水平线上时，我将画廊的溢出设置为隐藏，如果单击控件，图像将滑动。我给了它800px的宽度，但它没有做任何特殊的事情。我还使用了

{
  white-space: nowrap;
}