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

Question

我正在尝试创建一个非常简单的jquery滑块，而不是使用其中的数百万个。所以我差不多完成了它，但我遇到了问题。我正在使用jquery的动画来移动图像，我需要在同一水平线上显示所有图像以使脚本正常工作。现在，他们被垂直列出，我现在已经考虑了2个小时了。所以这是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>

CSS：

    #gallery-wrap{margin: 0 auto; overflow: visible; width: 100%; position: relative; height:300px; border:1px solid black; border-radius:6px; z-index:3;}
#gallery{position: relative; left: 0; top: 0; width:100%;}
.galleryimage{float:left; width:100%; height:300px;}

#gallery-controls{width: 100%; z-index:4;}
#gallery-prev{position:absolute; left:0px; top:0px; width:50%; height:300px; background-color:rgba(77,77,77,0.5);}
#gallery-next{position:absolute; right:0px; top:0px;  width:50%; height:300px; background-color:rgba(88,88,88,0.5);}

和jquery：

 $(document).ready(function(){ 

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

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

});

这是一张图片，显示目前如何渲染图像，以防我解释错误，英语不是我的第一语言：

我试过显示：内联没有运气。

Answer 1

使用float:left代替display:inline强制内联流，而不会失去调整功能。

这是example：

如果你想强迫它不要用狭窄的浏览器窗口包裹，请像这样设置一个固定的宽度到画廊：

#gallery
{
    width: 1500px;
}

Answer 2

您正在使用#gallery li img {display:inline;}

而是将display:inline;应用于此#gallery li并将其从#gallery li img

中删除

#gallery li{width: /*here goes some width*/; height: 300px; float:left; display: inline;}

并且不要将图片和li元素的宽度用作100％，请查看My fiddle

我看到了您网页的来源，假设您需要单个水平行中的所有图片，请为<li>元素设置宽度，并在文本段落前使用<div style="clear: both;"></div>清除花车。

Answer 3

您可以让图片的容器

{
  white-space: nowrap;
}

回答了这个问题How to adjust ul width property?