0

そのため、画像を横に並べて配置するのに苦労しています。これらは実際には、代わりにボタンとして機能するように変更したスライドショーです。easyslider javascript を使用して関数を実行しましたが、easyslider が原因であるかどうかはわかりません。つまり、彼らは垂直に並んでいます。css id 要素に「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>

そして、ここに私の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;
}

それが私のリストの配置によるものかどうかはわかりません。

画像が希望どおりに配置されない理由について、誰かが原因を明らかにすることはできますか?

4

1 に答える 1

0

問題はないようです。あなたのコードは機能します。動作を示すために、以下に若干の調整を加えました。特定のブラウザで問題が発生していますか?

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;
}
于 2013-05-13T04:44:19.903 に答える