Question

我正在尝试制作一个图像列表（图库），我找到了一个源代码并对其进行了查找，但我不知道如何更改它以便将图像设置为水平线：这是代码（已更改）如果有人有任何想法会提前感谢你

<body>


    <div id="ps_slider" class="ps_slider">
        <a class="prev disabled"></a>
        <a class="next disabled"></a>
        <div id="ps_albums">
            <div class="ps_album" style="opacity:0;"><img    src="albums/album1/thumb/thumb.jpg" alt=""/></div>
            <div class="ps_album" style="opacity:0;"><img src="albums/album2/thumb/thumb.jpg" alt=""/></div>
            <div class="ps_album" style="opacity:0;"><img src="albums/album3/thumb/thumb.jpg" alt=""/></div>
            <div class="ps_album" style="opacity:0;"><img src="albums/album4/thumb/thumb.jpg" alt=""/></div>
            <div class="ps_album" style="opacity:0;"><img src="albums/album5/thumb/thumb.jpg" alt=""/></div>
            <div class="ps_album" style="opacity:0;"><img src="albums/album6/thumb/thumb.jpg" alt=""/></div>
            <div class="ps_album" style="opacity:0;"><img src="albums/album7/thumb/thumb.jpg" alt=""/></div>
            <div class="ps_album" style="opacity:0;"><img src="albums/album8/thumb/thumb.jpg" alt=""/></div>
            <div class="ps_album" style="opacity:0;"><img src="albums/album9/thumb/thumb.jpg" alt=""/></div>
        </div>  
    </div>

    <div id="ps_overlay" class="ps_overlay" style="display:none;"></div>
    <a id="ps_close" class="ps_close" style="display:none;"></a>
    <div id="ps_container" class="ps_container" style="display:none;">
        <a id="ps_next_photo" class="ps_next_photo" style="display:none;">                </a>
    </div>
body, ul, li, h1, h2, h3{
margin:0;
padding:0;
}


/* Image container style */
 .ps_container{
width:480px;
height:350px;
position:absolute;
top:50%;
margin-top:-175px;
left:50%;
margin-left:-240px;
z-index:100;
}
.ps_container img{
border:1px solid #fff;
position:absolute;
top:50%;
left:50%;
-moz-box-shadow:1px 1px 10px #000;
-webkit-box-shadow:1px 1px 10px #000;
box-shadow:1px 1px 10px #000;
}

a.ps_next_photo:hover,

/* Thumbnail slider style */
.ps_slider{
width:845px;
height:300px;
position:relative;
margin:110px auto 0px auto;
}
.ps_slider a.next,
.ps_slider a.prev{
position:absolute;
background-color:#000;
background-position:center center;
background-repeat:no-repeat;
border:1px solid #232323;
width:20px;
height:20px;
top:20%;
margin-top:-10px;
opacity:0.6;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
cursor:pointer;
outline:none;
}
.ps_slider a.prev:hover,
.ps_slider a.next:hover{
border:1px solid #333;
opacity:0.9;
}
.ps_slider a.disabled,
.ps_slider a.disabled:hover{
opacity:0.4;
border:1px solid #111;
cursor:default;
}
.ps_slider a.prev{
left:-30px;
background-image:url(../images/prev.png);
}
.ps_slider a.next{
right:-30px;
background-image:url(../images/next.png);

}
.ps_slider .ps_album{
width:140px;
height:100px;
padding:10px;
background-color:#333;
border:1px solid #444;
position:absolute;
top:0px;
text-align:center;
cursor:pointer;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
-webkit-box-reflect:
    below 5px 
    -webkit-gradient(
        linear, 
        left top, 
        left bottom, 
        from(transparent), 
        color-stop(0.6, transparent), 
        to(rgb(18, 18, 18))
    );
}
.ps_slider .ps_album:hover{
    background-color:#383838;
}
.ps_slider .ps_album img{
height:90px;
border:1px solid #444;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}

.ps_slider .ps_album:hover .ps_desc{
background-image:none;
}
.ps_slider .ps_album .ps_desc span{
display:block;
margin:0px 10px 10px 10px;
border-top:1px solid #333;
padding-top:5px;
}

Answer 1

您可以将它们放在表格中

<table>
    <tr>
        <td>image1 stuff</td>
        <td>image2 stuff</td> // and so on
    </tr>
</table>

Answer 2

尝试将此添加到您的CSS：

.ps_slider .ps_album {
   float: left;
}

图像画廊水平对齐

2 个答案: