Question

下面是我的代码。我想创建一个锚链接，其后有gary背景div，这是我的方法：

<div style="text-align: center; background: #F0F0F0; width: 200px; margin: 0 auto; padding: 8px;">
    <span style="color: #604c8d; font-weight: 300;">
        <a href="#">CLICK HERE</a>
    </span>
</div>

我的问题是为什么div的高度没有作为文本内容扩展？之所以可以看到后面的灰色背景，是因为我在上面添加了填充。如果删除填充部分，则gary背景消失。我没有做其他任何事情，例如浮动或绝对定位。谁能帮我吗？

Answer 1

在现代HTML中，您可以将<a>包装在几乎所有所需标签中，我将<div>设置为内联块，因此它不会占据整个宽度，需要包装使其居中对齐。

 <div style="text-align: center">
    <a href="#">
      <div style="text-align: center; background: #F0F0F0; width: 200px; padding: 8px;display: inline-block;">
        <span style="color: #604c8d; font-weight: 300;">
           CLICK HERE
        </span>
      </div>
    </a>
</div>

为什么我的div不能扩展为文本内容

1 个答案: