Javascript 对齐图像幻灯片按钮HTML5

因此，我很难将我的图像水平地排列在一起。它们实际上是幻灯片，我修改了它们，让它们充当按钮。我使用easyslider javascript来执行该函数，不确定easyslider是否是原因。所以问题是，它们垂直排列。我尝试将“float:left”添加到css id元素并将其附加到图像中，但没有效果

 <div id="sliderparent">

            <div class="slider">
        <ul>                
            <li>
                <a href="#article1"><img class="sliderimg"src="images/example-slide-1.jpg" /></a></li>
            <li>
                    <a href="#article1"><img class="sliderimg"src="images/example-slide-2.jpg" /></a></li>
            <li>
                        <a href="#article1"><img class="sliderimg"src="images/example-slide-3.jpg" /></a></li>
            <li>
                            <a href="#article1"><img class="sliderimg"src="images/example-slide-4.jpg" /></a></li>

        </ul>
    </div>

}

我不确定这是否是由于我的名单安排

---

有人能解释一下为什么我的图像没有按照我希望的方式对齐吗？

看起来没有问题。你的代码可以工作。我在下面做了一些轻微的调整来演示它的工作。您是否对特定浏览器有问题

---

对不起，我想我不清楚密码。应该有两个幻灯片对象，而不仅仅是一个。我想把它们并排对齐，因为宽度是800px，每个按钮只有200px，所以我应该能够在幻灯片上放置4个按钮，然后再放到新的一行。@user2330725您能进一步解释一下吗？更新你的问题，使你的目标清晰明了。您想要两个分别带有4个按钮/图像的

ul

s？所有这些都应该在同一行吗？

#sliderparent {
width: 800px;
align-content:center;
text-align:center;

.slider ul, .slider li{
    margin:0;
    padding:0;
    list-style:none;
      position:initial;

    }
.slider li{ 
    /* 
        define width and height of list item (slide)
        entire slider area will adjust according to the parameters provided here
    */ 
    width:200px;
    height:100px;
    overflow:hidden; 
     float:left;
    }       
.sliderimg
 { 
    width:200px; 
      height: auto; 
      float:left;
}

<div id="sliderparent">
    <div class="slider">
    <ul>                
        <li><a href="#article1"><img class="sliderimg"src="images/example-slide-1.jpg" /></a></li>
        <li><a href="#article1"><img class="sliderimg"src="images/example-slide-2.jpg" /></a></li>
        <li><a href="#article1"><img class="sliderimg"src="images/example-slide-3.jpg" /></a></li>
        <li><a href="#article1"><img class="sliderimg"src="images/example-slide-4.jpg" /></a></li>
    </ul>
</div>

#sliderparent {
    width: 800px;
    text-align: center;
}
.slider ul,
.slider li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: initial;
 }
.slider li {
    /* define width and height of list item (slide)
       entire slider area will adjust according to the parameters provided here */ 
    width: 200px;
    height: 100px;
    overflow: hidden; 
    float: left;
}       
.sliderimg { 
    width: 200px; 
    height: auto; 
    float: left;

    /* make images blocks temporarily */
    display: block;
    height: 100px;
    background: #ccc;
}