css - CSS 链接背景颜色宽度

Question

如何在 li 元素内设置一个链接，使其背景比实际文本更长，并且它们都彼此相等？

CSS

.popoutsidebar li { margin-bottom: 20px; padding: 5px; }
.popoutsidebar li a { background-color: #E5E5E5; color: #B94A48; padding: 10px; border-radius: 5px; }
.popoutsidebar li a:hover { background-color: #B94A48; color: #FFFFFF; text-decoration: none; }

Answer 1

<a>nchor 标签默认是内联的。尝试这样的事情：

.popoutsidebar li a { display:block }

该display属性允许您定义某个 HTML 元素应如何显示。

display: block意味着元素显示为一个块，就像段落和标题一样。一个块的上下都有一些空格，并且它旁边不允许有任何 HTML 元素，除非有其他命令（例如，通过向另一个元素添加浮点声明）。

display: inline表示元素内联显示，在当前块内的同一行。只有当它在两个块之间时，元素才会形成一个“匿名块”，但是它具有最小的可能宽度。

http://quirksmode.org/css/css2/display.html