Правильное отображение похожих новостей при адаптивности



Наверно борзость с моей стороны создавать топик за топиком, да еще и не по теме движка. Но мне тут так хорошо помогают :)

Проблема в адаптивном дизайне, не могу нормально назначить последнему -li- пустое значение правого паддинга. Он заранее не прописан, а значит ему нельзя назначить свой стиль, обрезать флоатом так же не могу из за зажевывания при адаптивности. Ниже пример с паддингом по левому и правому краю, но это не выход, крайние стороны нормально не ровняются с основной картинкой которая по ширине 100 %

Собственно сам код спарки плагинов Main preview и similar topic под катом:

<!-- Similarpopup plugin -->{if $aSimilarTopics}

<style>
.relatednews {
	padding:40px 0 20px 0;
}

.relatednews a {
	color:#00C;
}
.relatednews a:hover {
	color:#F30;
}

ul.ul_related {
display: block;
list-style: none;
overflow: hidden;
padding: 0px;}

.relatednews a img:hover {
opacity: 0.75;
}

.relatednews img {
padding-bottom:10px;
text-align:center;
}

.ul_related li {
display: -moz-inline-box;
display: inline-block;
vertical-align: top;
width: 120px;
padding: 8px;
}

</style>
<div class="relatednews"><ul class="ul_related">  
{foreach from=$aSimilarTopics item=oTopic name=nTopicCycle}
{assign var="oBlog" value=$oTopic->getBlog()}
{assign var="oUser" value=$oTopic->getUser()}      
<li>            
             <a class="topic_title" href="{$oTopic->getUrl()}"> 
             <img src="{$oTopic->getPreviewImageWebPath('120crop')}""/> 
             {$oTopic->getTitle()|escape:'html'}</a>
</li>
{/foreach}
</ul></div> <!--relatednews-->    
{/if}<!-- /Similarpopup plugin -->

2 комментария

avatar
попробуйте такое решение:
.ul_related li:last-child {
    padding-right: 0;
}
avatar
читал же где то на хабре об этом недавно, но не смог найти. спасибо. то что нужно :)
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.