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>默认情况下， anchor 标记是内联的。尝试这样的事情:

.popoutsidebar li a { display:block }

display属性可让您定义特定 HTML 元素的显示方式。

display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespaceabove and below it and tolerates no HTML elements next to it, exceptwhen ordered otherwise (by adding a float declaration to anotherelement, for instance).

display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocksdoes the element form an 'anonymous block', that however has thesmallest possible width.

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