对齐图片幻灯片按钮HTML5

Question

因此，我无法将我的图片水平排列在一起。他们实际上是我修改的幻灯片，以便它们充当按钮。我使用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> 

这里是我的CSS

#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; 
} 

我不知道这是否是由于我的名单排列。

有人可以解释为什么我的图像没有按照我希望的方式排列的原因吗？

Answer 1

似乎没有问题。你的代码有效。我在下面做了一些小的调整，以证明它的工作。您是否遇到特定浏览器的问题？

http://jsfiddle.net/rkT2k/

<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> 

而CSS：

#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; 
}