兩個簡單的按鈕CSS問題

我試圖改變閱讀更多按鈕的外觀。下面是我使用的代碼：兩個簡單的按鈕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); 
    } 
}

時遇到的兩個問題是如果使用顯示：塊按鈕爲100％的頁面的寬度和，如果我使用顯示：內聯塊中的按鈕是合適的尺寸，但不會將按鈕放在新的一行上。

第二，你可以看到在頂部我改變按鈕的鏈接顏色，但基本鏈接CSS規則是騎在它仍然。我將如何解決這個問題？

來源

2014-04-27 user1800738

如果你想要它自己的行上的按鈕，我會把它包裝在一個div或跨度與顯示：塊。

如果你真的不能在東西把它包起來，你可以試試這個：

&:before { 
    clear: both; 
}

裏面你.readmore定義。

至於默認的規則，這是你能解決這幾個方面，你既可以走：

a.readmore { 
    // etc 
}

或（這將適用.readmore頁面上的所有鏈接）

a { 
    .readmore; 
}

假設你的代碼很少。

來源

2014-04-27 05:31:44 thexacre

感謝您的回覆。就像我說的那樣，顯示屏的寬度是100％。我不知道Joomla中read more按鈕的代碼在哪裏。鏈接顏色的這些建議都無效。第一個沒有做任何事，第二個搞砸了我的整個頁面。另外，我的代碼更少。 – user1800738

我添加了另一個替代方案來實現新行上的按鈕，如果你真的不能將它包裝在一個div中。如果a.readmore仍然無法正常工作，那麼很難說如果沒有看到所有的CSS，問題是什麼。 – thexacre

這也沒有效果。您可以查看所有代碼：betterfreestuff.com向下滾動到底部，並閱讀更多內容。 – user1800738

兩個簡單的按鈕CSS問題

回答

相關問題