Question

我有这段代码

.parent {
    width:100px;
    height:100%;
    background: green;
}

.parent a {
    display:block;
    width:100%;
    height:100%;
}

<div class="parent">
    <h3>test</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic asperiores expedita rerum quos ullam qui saepe. Quas quasi dolorum quibusdam deserunt voluptas dolorem tenetur! Quam explicabo laboriosam quaerat iure ipsum.</p>
    <a href="#"></a>
</div>

我希望我的链接完全显示在其容器中（.parent）

使用此链接点击div。

Answer 1

我不确定我理解，但这是你想要的吗？

.parent {
  width:100px;
  height:100%;
  background: green;
}

.parent a {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:inherit;
  height:inherit;
}

<div class="parent">
    <h3>test</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic asperiores expedita rerum quos ullam qui saepe. Quas quasi dolorum quibusdam deserunt voluptas dolorem tenetur! Quam explicabo laboriosam quaerat iure ipsum.</p>
    <a href="#"></a>
</div>

Answer 2

试试这个：

.parent {
  width: 100px;
  height: 100%;
  background: green;
  position: relative;
}

.parent a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

如果你不想把你的div包装在一个锚标签中，它应该可以很好地完成。这是example。

Answer 3

必须在标签内写一个div。

    <a href="#"><div class="parent"> <h3>test</h3> <p>Lorem ipsum dolor sit   amet, consectetur adipisicing elit. Hic asperiores expedita rerum quos ullam qui saepe. Quas quasi dolorum quibusdam deserunt voluptas dolorem tenetur! Quam explicabo laboriosam quaerat iure ipsum.</p> <a href="#"></a> </div> </a>

显示阻止到div的链接

3 个答案: