将<li>文本与列表图像对齐</li>

Question

我正在制作一个无序列表，我应用了自定义list-style-image。它看起来像这样：

列表从第二行开始。如您所见，文本与列表图像的对齐方式不正确。我怎样才能解决这个问题？ 我已经试过了：

• 填充
• 行高
• 高度

CSS

.formErrorList {
    margin: 10px;
    padding-left: 35px;
    list-style-image: url("/icons/minus.png");
    line-height: 120%;
}

这些属性似乎都没有太大影响。

Answer 1

您应该只使用background-image。

查看此问答以获取更多信息：Adjust list style image position?

.formErrorList 
{
  margin: 10px;
  line-height: 120%;

  /* get rid of any bullets etc. */
  list-style-type:none;

  /* positioning is: 2px horizontal, 6px vertical. adjust to your needs. 
     you can also use keywords (such as "left", "top") 
     or percentages (eg. 50%) */
  background: url("/icons/minus.png") no-repeat 2px 6px; 

  /* pad to your liking */
  padding: 3px 0px 3px 35px;
}

Answer 2

不要使用list-style-image，而是background-image

使用li

Demo

CSS

ul li {
    background-image: url('http://indiapostarrow.gov.in/Writereaddata/bradcrum-arrow-icon.jpg');
    background-repeat: no-repeat;
    padding-left: 10px;
    background-position: 0 8px; /* Change this according to your image */
                         ^ ^
                      /* X Y - Co Ordinates */
}

Answer 3

我同意使用背景图片的建议。要使其垂直居中，请使用50％作为y坐标：

background: url(images/bullet.gif) no-repeat left 50%;