html - <a> 标签填满整个页面宽度？

Question

这是一些非常简单的 HTML

.box {
  width: 300px;
  height: 500px;
  background-color: #fff;
}

.box img {
  width: 300px;
  height: 425px;
}

<a href="#" class="box-a">
  <div class="box">
    <img src="movies.jpg">
    <span>Title</span>
  </div>
</a>

但是，由于某种原因，当我运行这段代码时， 标记填满了页面的整个宽度。有谁知道这是为什么，以及我将来如何防止它发生？

Answer 1

你的 <a>默认情况下是内联元素，因为 div 是 display: block元素它将填充整个页面。

从这里开始有两种方法:

• 您可以将其更改为display: inline-block你的链接将只填在你的盒子上；
• 或者你可以设置一个max-width给你<a>并将其设置为 display: block

a.box-a{
    display: inline-block
}

a.box-b{
    max-width: 300px;
    display: block;
}

.box {
  width: 300px;
  height: 500px;
  background-color: #fff;
}
.box img {
  width: 300px;
  height: 425px;
}

<a href="#" class="box-a">
  <div class="box">
    <img src="movies.jpg">
    <span>Title</span>
  </div>
</a>

<a href="#" class="box-b">
  <div class="box">
    <img src="movies.jpg">
    <span>Title</span>
  </div>
</a>

只需查看 caniuse.com如果display: inline-block兼容性符合您的元素标准，如果不符合 display: block; max-width: 300px解决方案。