1

li 要素のデフォルトのスクロールを垂直から水平に変更しようとしています。私はこれを行うことができますが、行内の要素のリストとして表示され、その下に別の要素のリストが表示されます。しかし、li 要素の数に関係なく、すべてのリストを 1 行にまとめたいと思います。

HTML のコード:

<div class="imageGallery">
       <ul>
           <li><img src="img01.png"/></li>
           <li><img src="img02.png"/></li>
           <li><img src="img03.png"/></li>
           <li><img src="img04.png"/></li>
           .....
           .....
       </ul>
</div>

CSS:

.imageGallery {
    overflow-x: scroll;
        overflow-y: hidden;

}   
        ul {
        width: 1500px;
        margin: 0;
        padding: 0;
    }

出力は、画像のリストが一列に並んだ水平スクロールバーとして表示され、その下に要素のリストが表示されます。すべてを1行にするにはどうすればよいですか？

助けてくれてありがとう。

4

1 に答える 1

4

私がよく理解しているなら、あなたはすべてのli要素を1行にとどまらせたいと思うでしょう。これをあなたのCSSに入れてください

.imageGallery ul{
    white-space: nowrap
} 
.imageGallery li{ 
    display:inline-block 
}
于 2013-01-09T14:36:59.260 に答える