html - 嵌套图像链接没有宽度，定义了所有父元素大小

Question

我打破了一个网格。出于某种原因，嵌套链接使其无法被其余的 css 代码访问。它是网格元素左侧下方的一条长条。所有的父元素都有定义的大小，所以不是这样。这是 HTML:

main {
    display: grid;
    row-gap: 15%;
    column-gap: 3%;
    grid-template-columns: repeat(5, 9%);
    grid-template-rows: repeat(2, 9%);
    background-color: transparent;
    overflow: hidden;
    height: 100%;
    width: 100%; 
    padding-left: 12%;
    overflow: hidden;
}

main a {
    border-radius: 50%;
    margin-right: 3%;
    margin-left: 3%; 
    margin-bottom: 40%;
    margin-top: 60%;
    width: 90%;
    padding-bottom: 90%;
    overflow: hidden;
}

#A {
    background: url('Buttons/button.png') no-repeat; 
    background-size: 100%;
}

<main>
   <div>
       <a href="A.html" id="A"></a>
       <p> A </p>
   </div>
</main>

出于某种原因，在网格元素内添加另一个网格修复了它(但是链接太小了，而且这看起来像是一项 hack 工作)。 (也定义了 div，但只是为了缩放，所以我没有添加它。)main a 能够控制其他链接，但没有选择器组合修复 div 中的链接。

Answer 1

为了 <a>标签正确继承其父元素的宽度，您需要通过给它 display: block 将其变成 block 级元素.这是因为 <a>标签是 inline默认情况下，这意味着它不会接受 width或 height值(即使它是继承的)。

我已经替换了图像以显示以下工作方式:

main {
  display: grid;
  row-gap: 15%;
  column-gap: 3%;
  grid-template-columns: repeat(5, 9%);
  grid-template-rows: repeat(2, 9%);
  background-color: transparent;
  overflow: hidden;
  height: 100%;
  width: 100%;
  padding-left: 12%;
  overflow: hidden;
}

main a {
  border-radius: 50%;
  margin-right: 3%;
  margin-left: 3%;
  margin-bottom: 40%;
  margin-top: 60%;
  width: 90%;
  padding-bottom: 90%;
  overflow: hidden;
}

#A {
  background: url('http://placehold.it/100') no-repeat;
  background-size: 100%;
  display: block;
}

<main>
  <div>
    <a href="A.html" id="A"></a>
    <p>A</p>
  </div>
</main>