Question

我想要所有文字＆＃34;文字在这里进行测试＆＃34;被绿色覆盖。现在只有顶部是绿色的。这是我的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

div container的backgorund颜色并不涵盖所有div内容

3 个答案: