应用程序忽略css

Question

我正在尝试创建两个宽度相同的按钮，如下所示：
带有黑色边框的蓝色方块中的白色文字，边距为5px：

这是我的css代码：

a.button
{
    background-color: Blue;
    border-width: 2px;
    border-color: Black;
    color: White;
    padding: 2px 5px 2px 5px;
    width:100px;
    margin: 5px;
} 

但我得到的是：

我正在使用谷歌Chrome浏览器，当我点击“检查元素”时，我可以看到我所有的css属性，但我的应用程序忽略了它们。

Answer 1

将您的元素设为inline-block：

a.button
{
    background-color: Blue;
    border-width: 2px;
    border-color: Black;
    color: White;
    padding: 2px 5px 2px 5px;
    width:100px;
    margin: 5px;

    display: inline-block;
}

不确定大写的颜色名称是否有帮助。

Answer 2

您需要声明边框样式（在您的情况下为实体）

尝试以下

a.button
{
    background-color: Blue;
    border: 2px solid black;
    color: White;
    padding: 2px 5px;
    width:100px;
    text-align:center;
    margin: 5px;
    display:inline-block;
    text-decoration:none;
}

您需要调整css，并添加悬停和活动状态。

示例：http://jsfiddle.net/3tKS7/