Html 图像不在空白范围内的背景

我试着把一个箭头从图像放到跨度的左边。我正在使用一个空白区域作为图像，并将背景图像分配给它。但仍然没有显示图像

ul{
保证金：0px 0px 0px 20px；
填充：0；
列表样式类型：无；
}
李{
边缘底部：5px；
边缘顶部：5px；
}
.展开图标
{
宽度：15px；
垂直对齐：中间对齐；
浮动：左；
线高：1.5em；
高度：自动；
背景：url（“https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png");
}
.编辑列表范围{
边框：1px实心#3465a4；
填充物：2px 5px 2px 5px；
背景：#fff；
线高：1.5em；
显示：块；
溢出：隐藏；
}

测试跨度

您看不到图像，因为它是

128x128

，周围有一个透明区域。您可以在span中添加图像，而不是将其作为背景，并在

处更改图像的大小。展开图标img

我希望这能为你澄清

ul{
保证金：0px 0px 0px 20px；
填充：0；
列表样式类型：无；
}
李{
边缘底部：5px；
边缘顶部：5px；
}
.展开图标
{
垂直对齐：中间对齐；
浮动：左；
线高：1.5em；
宽度：1.5em；
最小高度：1px；
}
.展开图标img{
宽度：1.5em；
}
.编辑列表范围{
边框：1px实心#3465a4；
填充物：2px 5px 2px 5px；
背景：#fff；
线高：1.5em；
显示：块；
溢出：隐藏；
}

测试跨度

您看不到图像，因为它是

128x128

，周围有一个透明区域。您可以在span中添加图像，而不是将其作为背景，并在

处更改图像的大小。展开图标img

我希望这能为你澄清

ul{
保证金：0px 0px 0px 20px；
填充：0；
列表样式类型：无；
}
李{
边缘底部：5px；
边缘顶部：5px；
}
.展开图标
{
垂直对齐：中间对齐；
浮动：左；
线高：1.5em；
宽度：1.5em；
最小高度：1px；
}
.展开图标img{
宽度：1.5em；
}
.编辑列表范围{
边框：1px实心#3465a4；
填充物：2px 5px 2px 5px；
背景：#fff；
线高：1.5em；
显示：块；
溢出：隐藏；
}

测试跨度

一种方法是使

li

显示：flex

并将右侧

span

设置为

flex-grow:1

或

flex:1 0简而言之，然后修复你的背景属性，使它的大小和位置


ul{
保证金：0px 0px 0px 20px；
填充：0；
列表样式类型：无；
}
李{
边缘底部：5px；
边缘顶部：5px；
}
.编辑列表{
显示器：flex；
}
.展开图标
{
宽度：15px；
线高：1.5em；
背景：url（“https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png）0中心不重复/100%；
}
.编辑列表范围{
边框：1px实心#3465a4；
填充物：2px 5px 2px 5px；
背景：#fff；
线高：1.5em；
溢出：隐藏；
弹性：100；
}


测试跨度

一种方法是使
li
显示：flex
并将右侧
span
设置为
flex-grow:1
或
flex:1 0简而言之，然后修复你的背景属性，使它的大小和位置


ul{
保证金：0px 0px 0px 20px；
填充：0；
列表样式类型：无；
}
李{
边缘底部：5px；
边缘顶部：5px；
}
.编辑列表{
显示器：flex；
}
.展开图标
{
宽度：15px；
线高：1.5em；
背景：url（“https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png）0中心不重复/100%；
}
.编辑列表范围{
边框：1px实心#3465a4；
填充物：2px 5px 2px 5px；
背景：#fff；
线高：1.5em；
溢出：隐藏；
弹性：100；
}


测试跨度

当图像从span中删除时，下一个span向左移动。有什么方法可以防止这种情况发生吗？将带有图像的跨距放在另一个跨距内。请参阅我上面更新的代码。不，不，我不想重叠两个跨距。我的意思是当img标签在里面的时候，像你的旧代码片段一样展开图标，然后就没事了。但如果我删除保持span空白的img标记，.expand图标的宽度会减小，.edit列表span会向左移动。所以我想知道有没有办法保持列表的宽度。编辑列表中有图片还是没有图片。是的，你可以做到。为此，使展开图标
宽度：1.5em和<代码>最小高度：1px。这样，div仍然会占用空间，但其中没有
。（请参见代码片段）从span中删除图像时，下一个span将向左移动。有什么方法可以防止这种情况发生吗？将带有图像的跨距放在另一个跨距内。请参阅我上面更新的代码。不，不，我不想重叠两个跨距。我的意思是当img标签在里面的时候，像你的旧代码片段一样展开图标，然后就没事了。但如果我删除保持span空白的img标记，.expand图标的宽度会减小，.edit列表span会向左移动。所以我想知道有没有办法保持列表的宽度。编辑列表中有图片还是没有图片。是的，你可以做到。为此，使展开图标
宽度：1.5em和<代码>最小高度：1px。这样，div仍然会占用空间，但其中没有
。（请参阅代码片段）我希望将箭头保留在文本范围之外，因此使用单独的范围。但根据您第一次建议使用flex，当我这样做时，另一个UI正在完全改变。我把小片段放在这里，我的代码是如此多单位的重复。@ShashwatKumar片段在哪里？我在问题中的意思是，片段是我代码的一部分。什么