html - 背景图像向下重复

我无法弄清楚为什么我的上一个background image向下重复。我已经彻底检查了HTML，并且没有重复的列表。

这是我的CSS的HTML：

 .contact-info a {
   display: block;
   min-height: 20px;
   background-repeat: no-repeat;
   background-size: 20px 20px;
   margin: 0 0 10px;
   padding: 0 0 0 30px;
 }
 .contact-info li.phone a {
   background-image: url('phone.png')
 }
 .contact-info li.mail a {
   background-image: url('mail.png')
 }
 .contact-info li.twitter a {
   background-image: url('../twitter.png')
 }

<section>
  <h3>Contact Details</h3>
  <ul class="contact-info">
    <li class="phone">
      <a href="tel:[phone]">555-555-555</a>
    </li>
    <li class="mail">
      <a href="mailto:[e-mail]">[e-mail]
    </li>
    <li class="twitter">
        <a href="#">My twitter</a>
    </li>
</section>

最佳答案

您没有关闭第二个a中的li标记，也缺少了结束标记ul。

避免此类错误的一个好方法是使用带有颜色代码的编辑器。

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  margin: 0 0 10px;
  padding: 0 0 0 30px;
}
.contact-info li.phone a {
  background-image: url('//dummyimage.com/20x20&text=1')
}
.contact-info li.mail a {
  background-image: url('//dummyimage.com/20x20&text=2')
}
.contact-info li.twitter a {
  background-image: url('//dummyimage.com/20x20&text=3')
}

<ul class="contact-info">
  <li class="phone">
    <a href="tel:[phone]">555-555-555</a>
  </li>
  <li class="mail">
    <a href="mailto:[e-mail]">[e-mail]</a>
  </li>
  <li class="twitter">
    <a href="#">My twitter</a>
  </li>
</ul>

关于html - 背景图像向下重复，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37912501/