css - css图片背景定位

Question

我正在努力应对 CSS 挑战。我有一个带有箭头符号的列表。我希望箭头子弹在第一行对齐。这个箭头子弹是通过背景图像设置的，如下所示：

.linklist a { 
  display: block; 
  padding: 0 0 0 8px; 
  background: transparent url("../images/css/arrow-left.png") no-repeat 0; 
  text-decoration: none; 
  outline: none; }

结果是：

当我删除 display: block 时，它会在第一行显示箭头子弹，就像我想要的那样。但是现在，第二行缩进了。我想要两条线之间的垂直对齐和第一行对齐的箭头子弹。有什么我忽略了如何设计这个吗？

希望有人能帮助我吗？

亲切的问候。

Answer 1

CSS

background-position: left top;

Answer 2

尝试类似：

background: transparent url("../images/css/arrow-left.png") 0 -4px no-repeat;

作为0左边的背景位置和-4px顶部的位置。

Answer 3

您需要使用背景位置：

.linklist a { 
  display: block; 
  padding: 0 0 0 8px; 
  background: transparent url("../images/css/arrow-left.png") no-repeat 0; 
  text-decoration: none; 
  outline: none;
  /*new*/
  background-position: 15px 20px
 }