在“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

您必须创建两个类＆amp;这样定义：

<强> 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>

Answer 2

将此添加到您的CSS代码

.thumbs li.alt {
    float: right;
    padding: 4px 8px 4px 0px;
}

将class .alt添加到每个第二个li，使用你的模板引擎for循环或类似的东西:)。这种方式将来如果你决定关闭正确的对齐方式，你只需要修改1个css类。

<li class="">...</li>   
<li class="alt">...</li>   

Answer 3

这些css规则都没有将html嵌入式图片对齐方式更改为

内的右侧

<ul>

标签......