div 容器的背面颜色不能涵盖所有 div 内容

Question

我希望所有文本"此处测试文本"都用绿色覆盖。现在只有顶部是绿色的。 这是我的代码：

.circle {
  background: #00ff00;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

<div style="background-color: #00ff00">
  <a target="_blank" href="https://podio.com/abccapitalinvestmentscom/labs/apps/crew-agreements/items/1229" style="color: #0040ff">
    <div class="circle">
      <div style="padding-left:5px;">Text here for test</div>
    </div>
  </a>
</div>

Answer 1

你在圆圈上设置了 10px 的高度，.circlediv 包含文本。具有 bgColor 的父div 将具有其子级的高度。所以它只会覆盖 10px。文本溢出，因为这是默认行为。

因此，一个简单的解决方案是从圆圈中删除height:10px。或者更改 HTML 结构并单独包含文本，而不是在div .circle内

.circle {
    background: #00ff00;
    width:10px;
   
    border-radius: 50%;
}

<div style="background-color: #00ff00">
		<a target="_blank" href="https://podio.com/abccapitalinvestmentscom/labs/apps/crew-agreements/items/1229" style="color: #0040ff"> 
				<div class="circle"><div style="padding-left:5px;">Text here for test</div>
				</div>
		</a>
</div>

Answer 2

只需从类中删除height: 10px; .circle

.circle {
  background: #00ff00;
  width: 10px;
  border-radius: 50%;
}

<div style="background-color: #00ff00">
  <a target="_blank" href="https://podio.com/abccapitalinvestmentscom/labs/apps/crew-agreements/items/1229" style="color: #0040ff">
    <div class="circle">
      <div style="padding-left:5px;">Text here for test</div>
    </div>
  </a>
</div>

Answer 3

<div style="background-color: #00ff00;">
  <a target="_blank" href="https://podio.com/abccapitalinvestmentscom/labs/apps/crew-agreements/items/1229" style="color: #0040ff">
    <div>
      <div style="padding:5px;">Text here for test</div>
    </div>
  </a>
</div>