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>

由于某种原因，在grid元素内添加了另一个网格对其进行了修复（但是链接太小了，这似乎像是一项黑客工作）。（也定义了div，但仅用于缩放，因此我没有添加它。）main a能够控制其他链接，但是没有选择器的组合可固定div中的一个。

Answer 1

为了使<a>标签正确地继承其父元素的宽度，您需要通过给其display: 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>

嵌套图像链接没有宽度，所有父元素尺寸均已定义

1 个答案: