如何为链接<a></a>创建宽度，高度和背景颜色

Question

我制作了一个小部件，其中包含一些看起来像这个垂直菜单的类别：

所以我用这种方式：

a {

    width:200px;
    height: 30px;
    background-color: #eee;
    border: 1px solid #836262;
    text-decoration: none 


  }

我写这个是为了改变悬停时的背景颜色，因为“category”是链接标记的类：

.category:hover {

               background-color: #ccc;
               cursor: pointer;


           }

但我失败了，小部件出现了：

为什么链接的宽度和高度不是200和30 px ??

Answer 1

您需要将display：block添加到a。

Answer 2

您需要使用display: inline-block/block;作为锚标记，以采用任何尺寸样式。

Here's a quick fiddle带有您的菜单，此代码并非真正用于使用，仍需要调整才能使用。

Answer 3

可能是你没有注意的css中的一些优先事项。 确保使用

!important; 

像这样：

width:200px !important;

！important给予最高优先级。