выровнять изображения в тегах "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

Вы должны создать два класса & определяют так:

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

Добавить класс .alt к каждому 2-м лити, используйте механизм шаблонов для цикла или что-то подобное :). Таким образом, в будущем, если вы решите отключить правильное выравнивание, вам просто нужно изменить 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"

ответ

Смежные вопросы