對齊圖片幻燈片按鈕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; 
}