如何用元素正确包装 div 元素

Question

我似乎无法用a 标签正确包装div 元素。

html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

<ul>
  <li><a href="#"><div class="mx-2 facebook"></div></a></li>
  <li><a href="#"><div class="mx-2 twitter"></div></a></li>
  <li><a href="#"><div class="mx-2 instagram"></div></a></li>
  <li><a href="#"><div class="mx-2 snapchat"></div></a></li>
</ul> 

这是scss，但是懂css的人应该都能看懂

@mixin social-icon($hover-color, $icon) {
  position: relative;
  background-color: lightgray;
  border-radius: 50%;

  &:hover {background-color: $hover-color;}

  &::after {
    position: absolute;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
    content: $icon;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

ul {
    list-style: none;

    li {
      display: inline;
      color: white;
      font-size: 1.25rem;

      div {
        display: inline-block;
        width: 2rem;
        height: 2rem;
      }

    }
  }

.facebook {@include social-icon(#3B5998, "\f39e");}
.twitter {@include social-icon(#1dcaff, "\f099");}
.instagram {@include social-icon(#e1306c, "\f16d");}
.snapchat {@include social-icon(#fffc00, "\f2ac");}

Here's a pen

a 标记的边界与li 标记配合得很好，但是当涉及div 元素时，a 标记只是忽略了div 元素的边界并停留在原处它在。

Answer 1

为什么是 div？为什么不：

<li><a href="#" class="mx-2 facebook"></a></li>

ul {
   li {
     a {
       display:inline-block;
     }
   }
}

Answer 2

将链接的显示属性添加到display: inline-block。单独这样做会留下一点悬念，使用 display: block 更改 div 和相同大小的链接。我还建议将 li 设置为display: inline-flex。

我已将其添加到下面的 SCSS 中

@mixin social-icon($hover-color, $icon) {
  position: relative;
  background-color: lightgray;
  border-radius: 50%;

  &:hover {background-color: $hover-color;}

  &::after {
    position: absolute;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
    content: $icon;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

ul {
    list-style: none;

    li {
      display: inline-flex;
      color: white;
      font-size: 1.25rem;

      a { 
        display: inline-block;
      }

      div {
        display: block;
        width: 2rem;
        height: 2rem;
      }

    }
  }

.facebook {@include social-icon(#3B5998, "\f39e");}
.twitter {@include social-icon(#1dcaff, "\f099");}
.instagram {@include social-icon(#e1306c, "\f16d");}
.snapchat {@include social-icon(#fffc00, "\f2ac");}

Answer 3

对我来说这似乎无关紧要，因为可点击的链接区域似乎仍然很好地扩展到了 div 的大小。但是，如果您想修复它，只需添加

a {
  display: inline-block;
}

虽然，您可能不想像我一样在全局范围内选择所有标签。这个解决方案仍然会使 a 标签比 div 大一点。完美主义者可以试试。

@mixin social-icon($hover-color, $icon) {
  position: relative;
  background-color: lightgray;
  border-radius: 50%;

  &:hover {background-color: $hover-color;}

  &::after {
    position: absolute;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
    content: $icon;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

ul {
    list-style: none;

    li {
      display: inline-block;
      color: white;
      font-size: 1.25rem;
      width: 2rem;
      height: 2rem;

      div {
        // display: inline-block;
        height: 100%;
        // width: 2rem;
        // height: 2rem;
      }

    }
  }

.facebook {@include social-icon(#3B5998, "\f39e");}
.twitter {@include social-icon(#1dcaff, "\f099");}
.instagram {@include social-icon(#e1306c, "\f16d");}
.snapchat {@include social-icon(#fffc00, "\f2ac");}

a {
  display: block;
  width: 100%;
  height: 100%;
}