Помогите, пожалуйста, подредактировать менюшку.
Сначала вставляла изображения в тегах, но border
никак не смогла выровнять на уровне текста и картинку так же рядом:
ul li{
float: left;
list-style-type: none;
}
a{
text-decoration: none;
color: #464646;
cursor: pointer;
}
.top_header{
height: 39px;
}
.top_header li{
padding-top: 7px;
height: 32px;
}
.top_header img{
margin: 0 6px;
}
.menu li a{
border-left: 1px solid #ccc;
padding: 0px 10px;
height: 18px;
display: block;
line-height: 41px;
}
.menu li:hover{
background: #8ea4ca;
}
.menu li:hover a{
color: #fff;
border: none;
}
.menu li:last-child a{
color: #eb1f27;
}
<div class="top_header">
<ul class="menu">
<li><a href="#"><span><img src="images/phone-book.png" alt=""/></span>Контакты</a></li>
<li><a href="#"><span><img src="images/shopping-bag.png" alt=""/></span>Заказ</a></li>
<li><a href="#"><span><img src="images/wallet.png" alt=""/></span>Оплата</a></li>
<li><a href="#"><span><img src="images/pie-chart.png" alt=""/></span>Рассрочка</a></li>
<li><a href="#"><span><img src="images/delivery-truck.png" alt=""/></span>Доставка</a></li>
<li><a href="#"><span><img src="images/certifikate.png" alt=""/></span>Гарантия</a></li>
<li><a href="#"><span><img src="images/ikonka-form.png" alt=""/></span>Отзывы</a></li>
<li><a href="#"><span><img src="images/sitemap.png" alt=""/></span>Карта сайта</a></li>
<li><a href="#"><span><img src="images/3-circles-inside-the-dialogue-box.png" alt=""/></span>Блог</a></li>
<li><a href="#"><span><img src="images/gift-box.png" alt=""/></span>Акции</a></li>
</ul>
</div>
Потом поняла, что надо делать как background
иконки, потому что позже при наведении должны будут меняться на другие, но все равно криво.
Как лучше сделать?
ul li{
float: left;
list-style-type: none;
}
a{
text-decoration: none;
color: #464646;
cursor: pointer;
}
.top_header{
height: 39px;
}
.top_header li{
padding-top: 7px;
height: 32px;
}
.menu li a{
border-left: 1px solid #ccc;
padding: 0px 10px 0 20px;
height: 18px;
display: block;
line-height: 41px;
}
.menu li:hover{
background: #8ea4ca;
}
.menu li:hover a{
color: #fff;
border: none;
}
.menu li:last-child a{
color: #eb1f27;
}
.menu li:nth-child(1) a{
background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat;
}
.menu li:nth-child(2) a{
background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat;
}
.menu li:nth-child(3) a{
background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat;
}
.menu li:nth-child(4) a{
background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat;
}
.menu li:nth-child(5) a{
background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat;
}
.menu li:nth-child(6) a{
background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat;
}
.menu li:nth-child(7) a{
background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat;
}
.menu li:nth-child(8) a{
background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat;
}
.menu li:nth-child(9) a{
background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat;
}
.menu li:nth-child(10) a{
background: url(http://www.images-store.ru/townwars_images/i/clan/icon_29.png) 5px no-repeat;
}
<div class="top_header">
<ul class="menu">
<li><a href="#"><span>Контакты</span></a></li>
<li><a href="#"><span>Заказ</span></a></li>
<li><a href="#"><span>Оплата</span></a></li>
<li><a href="#"><span>Рассрочка</span></a></li>
<li><a href="#"><span>Доставка</span></a></li>
<li><a href="#"><span>Гарантия</span></a></li>
<li><a href="#"><span>Отзывы</span></a></li>
<li><a href="#"><span>Карта сайта</span></a></li>
<li><a href="#"><span>Блог</span></a></li>
<li><a href="#"><span>Акции</span></a></li>
</ul>
</div>
Тк по моими попыткам не особо ясно что хочу сделать, вот картинка: