html - Why is display:block; not causing this tag to fill all available area inside this ?

Answer 1

你的 CSS 完全被顶起来了。您的 href 只会占用您为其定义的空间（也就是行高和您要链接的文本字符串的长度）。如果你想让它占据整个 div，那么你的包含 div 应该有一个宽度和高度，然后链接应该设置为 width: 100%; 高度：100%；

因此，如果您定义的唯一内容是食物 ID，那么它将不起作用。您必须在锚点周围定义 div。

这是一个 JS 小提琴示例：http: //jsfiddle.net/pwym7/

<div style="height: 100px; width: 100px;"><a href="#" style="width: 100%; height: 100%; display: block;">WORDS</a></div>