Я пытаюсь получить маленький домашний образ на моей панели навигации на панели. По какой-то причине он отключает нижнюю часть моего домашнего изображения. Вот мой навигационный бар с сухарями:
Домашний снимок находится слева от нижней серой полосы, и отсутствует нижняя половина.
Вот мой html:
<ul class="breadcrumbs">
<li><a href="#"></a></li>
<li><a href="#">Games</a></li>
</ul>
Вот мой css:
.breadcrumbs {
@include grid-column(12);
border: none;
background-color: #D7D7D7;
padding: 0 0 10px;
margin: 0 0 5px 0;
display:block;
}
.breadcrumbs > li{
display:inline;
padding: 0px 40px;
height:13px;
line-height:25px;
}
.breadcrumbs > li:first-child{
background: transparent url("../images/home_image2.png") 5px 4px no-repeat;
position: absolute;
left: 15px;
right: 10px;
}
Какая часть моего кода отключает домашний образ?
Замените код css, как указано ниже:
.breadcrumbs > li{
display:inline-block;
vertical-align: middle;
}
.breadcrumbs > li:first-child a{
background: transparent url("../images/home_image2.png") 0 0 no-repeat;
width: 16px;
height: 13px;
display: inline-block;
}
Он должен решить вашу проблему. Также это поможет вашему домашнему значку правильно вести себя как ссылку для пользователя, помещая здесь вместо тега 'a' вместо тега 'li'.
--- Обновление --- Забыл упомянуть, измените значение высоты/ширины на изображение значка, у css есть те, которые у меня были с моим значком.
.breadcrumbs
:padding: 10px 0;
margin: 0;