两个简单的按钮CSS问题

Question

我试图改变阅读更多按钮的外观。以下是我使用的代码：

.readmore {
    display: block;
    color: #ffffff !important;
    border: none;
    background-color: #7ebe54;
    .border-radius(3px);
    .transition(all 0.4s ease 0s);
    padding: 10px 15px;
    &:hover,
        &:active,
        &:focus{
        .box-shadow(0 0 0 26px rgba(0, 0, 0, 0.1) inset);
    }
}

我遇到的两个问题是，如果我使用显示：阻止按钮是页面宽度的100％，如果我使用显示：内联块，按钮尺寸合适，但它没有。把按钮放在新线上。

其次，您可以在顶部看到我更改按钮链接颜色，但基本链接css规则仍然过度使用它。我该如何解决这个问题？

Answer 1

如果你想要它上面的按钮自己的行，我将它用display：block包裹在div或span中。

如果你真的无法将它包装成某物，你可以试试这个：

&:before { 
    clear: both; 
}

在.readmore定义中。

至于默认规则，这些可以解决这个问题的方法，你可以去：

a.readmore {
    // etc
}

或（这将适用于.read更多到页面上的所有链接）

a {
    .readmore;
}

假设你的代码很少。