Question

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

以下是此css的HTML：

＆＃13;

 .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')
 }

＆＃13;

<section>
  <h3>Contact Details</h3>
  <ul class="contact-info">
    <li class="phone">
      <a href="tel:555-555-555">555-555-555</a>
    </li>
    <li class="mail">
      <a href="mailto:keytocheema@gmail.com">Keytocheema@gmail.com
    </li>
    <li class="twitter">
        <a href="#">My twitter</a>
    </li>
</section>

＆＃13;

Answer 1

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

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

＆＃13;

.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')
}

＆＃13;

<ul class="contact-info">
  <li class="phone">
    <a href="tel:555-555-555">555-555-555</a>
  </li>
  <li class="mail">
    <a href="mailto:keytocheema@gmail.com">Keytocheema@gmail.com</a> 
  </li>
  <li class="twitter">
    <a href="#">My twitter</a>
  </li>
</ul>

＆＃13;

Answer 2

您尚未关闭<ul>和<a>。

<section>
  <h3>Contact Details</h3>
  <ul class="contact-info">
    <li class="phone">
      <a href="tel:555-555-555">555-555-555</a>
    </li>
    <li class="mail">
      <a href="mailto:keytocheema@gmail.com">Keytocheema@gmail.com</a>
    </li>
    <li class="twitter">
        <a href="#">My twitter</a>
    </li>
  </ul>
</section>

背景图像向下重复

2 个答案: