Я использую Unslider, чтобы показывать фотографии на главной странице создаваемого вами веб-сайта, но изображения окружены тем, что выглядит дополнением, - и в моем css нет отступов. Как я могу это исправить? Это заставляет мою чистую галерею выглядеть ужасно.
Плагин Unslider найден здесь: http://unslider.com
Здесь HTML:
<div class="banner">
<ul>
<li><img src="media/duo.jpg" alt="Duo"/></li>
<li><img src="media/lastshot.jpg" alt="Last"/></li>
<li><img src="media/rose.jpg" alt="rose"/></li>
<li><img src="media/r0se.jpg" alt="D"/></li>
</ul>
</div>
CSS:
.banner {
position: relative;
width: 100%;
overflow: auto;
font-size: 18px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #000000;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
banner ul {
list-style: none;
width: 300%;
}
.banner ul li {
display: inline-block;
float: left;
width: 33%;
min-height: 350px;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}
И вот скриншот о том, что я говорю:
Элементы <ul>
имеют значение заполнения по умолчанию. У меня такая же проблема. Я решил это, добавив padding:0px
в стиль .banner ul
.
Возможно, у изображений есть значение заполнения по умолчанию, добавление прокладки: 0px; в файл css на ".banner ul li" и ".banner ul li img"