为什么我的形象会被切断？ Css面包屑吧

Question

我正试图在我的痕迹导航栏上获得一个小的家庭图像。出于某种原因，它正在切断我家图像的底部。这是我的带有面包屑的导航栏：

主图像位于底部灰色条的左侧，并且缺少下半部分。

这是我的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;
 }

我的代码的哪一部分正在切断主页图片？

Answer 1

替换您的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具有我的图标。