html - 为什么我的图像被截断了？ 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 具有我的图标。