html - 将 <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;
}