Question

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

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

将链接的显示属性添加到display: inline-block。单独执行此操作会产生一点点悬垂，请使用display: block更改div和链接的大小相同的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 2

为什么 div ？为什么不呢？

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

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

Answer 3

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

class MyContext : DbContext
{
    public DbSet<Blog> Blogs { get; set; }
    public DbSet<Post> Posts { get; set; }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.Entity<Post>()
            .HasOne(p => p.Blog)
            .WithMany(b => b.Posts)
            .HasForeignKey(p => p.BlogUrl)
            .HasPrincipalKey(b => b.Url);
    }
}

public class Blog
{
    public int BlogId { get; set; }
    public string Url { get; set; }

    public List<Post> Posts { get; set; }
}

public class Post
{
    public int PostId { get; set; }
    public string Title { get; set; }
    public string Content { get; set; }

    public string BlogUrl { get; set; }
    public Blog Blog { get; set; }
}

尽管如此，您可能不想像我一样全局选择所有标签。此解决方案仍会使标签比div大一点。对于完美主义者，您可以尝试。

a {
  display: inline-block;
}

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

3 个答案: