两个简单的按钮CSS问题

我正在尝试更改“阅读更多”按钮的外观。以下是我正在使用的代码：

.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);
    }
}

我遇到的两个问题是如果我使用display:block按钮是页面宽度的100%，如果我使用display:inline block按钮是正确的大小，但它不会将按钮放在新行上

---

第二，正如你在顶部看到的，我正在改变按钮链接的颜色，但是基本的链接css规则仍然凌驾于此。如何修复此问题？

如果您希望按钮位于自己的行上，我会使用display:block将其包装在div或span中

如果你真的不能用什么东西来包装它，你可以试试这个：

&:before { 
    clear: both; 
}

在您的.readmore定义中

对于默认a规则，有几种方法可以解决此问题，您可以选择：

a.readmore {
    // etc
}

或者这将适用。readmore适用于页面上的所有链接

a {
    .readmore;
}

---

假设您的代码更少。

谢谢您的回复。就像我说的，显示块的宽度是100%。我不知道“阅读更多”按钮的代码在Joomla的哪里。对于链接颜色的建议都不起作用。第一个什么也没做，第二个把我的整页都弄乱了。此外，我的代码更少。我添加了另一个替代方案，如果你真的无法将其包装在div中，则可以在新行上实现该按钮。如果a.readmore仍然不起作用，那么在看不到所有CSS的情况下很难说出问题所在。这也不起作用。您可以在以下位置查看所有代码：betterfreestuff.com向下滚动到底部，会出现一个readmore。当您将.readmore更改为.readmore.btn时会发生什么情况？我认为问题在于，readmore是链接的包装，而不是实际的链接。是的，这就是我刚才尝试的。这修复了链接颜色。让我们看看它是否修正了按钮的大小。