html - 对齐 "li"标签中的图像

Question

我的网站上有图片的缩略图。这是它的样子:

让我们考虑第二行。有两张图片(总是两张图片排成一排)，我想让第二张图片右对齐。
我该怎么做？

这是我想要的示例:

这是html代码:

<div class="navigation_container">
            <div id="dpthumbs0" class="navigation">
                <a href="#" class="pageLink prev"></a>
                <ul style="opacity: 1;" class="thumbs">
                        <li class="selected" style="opacity: 1;"><a rel="history" title="image" class="thumb" href="#1">
                            <img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=571437e8-ecfc-46f4-a14f-a645428fae46-pic_172.jpg">
                        </a></li>   
                        <li class="" style="opacity: 1;"><a rel="history" title="image" class="thumb" href="#2">
                            <img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=5ef5e802-916a-4ede-af11-c90274c63218-pic_176.jpg">
                        </a></li>   
                        <li class="" style="opacity: 1;"><a rel="history" title="image" class="thumb" href="#3">
                            <img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=fa6f5671-b9f6-48e6-a822-cea83424643c-pic_178.jpg">
                        </a></li>   
                        <li class="" style="opacity: 1;"><a rel="history" title="image" class="thumb" href="#4">
                            <img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=10b628ed-387e-43b5-908b-80b92efb7d2b-pic_180.jpg">
                        </a></li>   
                </ul>
                <!-- .thumbs-->
                <a href="#" class="pageLink next"></a>
            </div>
            <!-- .navigation-->
        </div>

这是所有的CSS:

.navigation_container {
    float: right;
    margin: 15px 0;
    padding: 30px 0;
    position: relative;
}
.navigation {
    height: 275px;
    overflow: hidden;
    width: 175px;
}
.slider .thumbs {
    width: 175px;
}
.thumbs li {
    float: left;
    padding: 4px 0 4px 8px;
}
.thumbs li img {
    border: 1px solid #424D55;
    height: 58px;
    max-width: 79px;
}

谢谢。

Answer 1

你必须创建两个类并这样定义:

CSS

.left{
 float:left;
 clear:left;
}
.right{
 float:right;
 clear:right;
}

HTML

<li class="left"></li>
<li class="right"></li>
<li class="left"></li>
<li class="right"></li>