html - 对齐文字列表图片

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.

查看此问答了解更多信息：调整列表样式图像位置？

.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-imageforli

演示

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%;