Почему мое изображение обрезается? Css батончик

Question

Почему мое изображение обрезается? Css батончик

0

Я пытаюсь получить маленький домашний образ на моей панели навигации на панели. По какой-то причине он отключает нижнюю часть моего домашнего изображения. Вот мой навигационный бар с сухарями:

Домашний снимок находится слева от нижней серой полосы, и отсутствует нижняя половина.

Вот мой 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;
 }

Какая часть моего кода отключает домашний образ?

MattCamp 21 март 2014, в 19:02

Источник

Теги:

html

sass

css

breadcrumbs

1 ответ

Ещё вопросы

ravk · Accepted Answer · 2014-03-21T16-31-00.000Z

Замените код 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 есть те, которые у меня были с моим значком.

Я использовал ваш код, и он добавил место в нижней части навигационной панели. Я не уверен, как от этого избавиться. dropbox.com/s/1k1ggcq9v1n811v/… Вы знаете, как это исправить?
попробуйте заменить следующие строки в вашем CSS-коде .breadcrumbs : padding: 10px 0; margin: 0;
Спасибо! У меня все работает сейчас.