對齊「li」中的圖片標籤

我在我的網站上有圖像的縮略圖。這是它的外觀：
enter image description here 對齊「li」中的圖片標籤

讓我們考慮第二行。有兩個圖像（總是兩行圖像），我想讓第二張圖像對齊到右側。
我該怎麼做？

這就是例子，我想：
enter image description here

這是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; 
}

感謝。

來源

2012-04-16 user348173

由於'column'你的情況的邏輯結構，你可以嘗試介紹'

'類型的東西。 – Hindol 2012-04-16 05:06:27

你必須創建兩類 &定義這樣的：

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>

來源

2012-04-16 04:55:01 sandeep

添加到您的CSS代碼

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

將class .alt添加到每個第二個li，使用您的模板引擎的for循環或類似的東西:)。如果您決定關閉正確的對齊方式，將來會這樣，您只需修改1個CSS類。

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

來源

2012-04-16 05:01:18 Phradion

沒有這些CSS規則更改HTML嵌入圖片對齊回落至右側內

<ul>

標籤...

來源

2016-02-04 06:08:26 101dolmations

對齊「li」中的圖片標籤

回答

相關問題