html - 动态显示内联图像列表加载

Question

我正在尝试加载一个图像列表，在一个 div 中，并将它们水平放置(以滚动)

问题是我无法将它们一个接一个地加载，以保持图像尺寸的百分比。

CSS:

 @charset"UTF-8";
 /* CSS Document */
 #collectionContainer {
     position:absolute;
     top:0px;
     left:0px;
     right:0px;
     bottom:15%;
     height:auto;
     width:auto;
     overflow-y: hidden;
     overflow-x: scroll;
 }
 #collectionContainer ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
 }
 #collectionContainer ul li {
     display:inline-block;
     float:left;
 }

页面:

    <div id="collectionContainer">
        <ul>
            <? $dir='content/collection/' .$_GET[ 'collSea']. '/'; 
$dh=opendir($dir); 
while (false !==( $filename=r eaddir($dh))) { 
if ($filename !=="." && $filename !==".." ){ 
if (pathinfo($filename, PATHINFO_EXTENSION)=="jpg" ){ ?>
            <li>
                <img width="auto" height="100%" src="content/collection/<? echo($_GET['collSea']); ?>/<? echo($filename); ?>" />
            </li>
            <?  } } } ?>
        </ul>
    </div>

Answer 1

尝试:

li {
    width: 1000%;
}

它应该有效!