Две простые проблемы с 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

Если вы хотите, чтобы кнопка была на собственной строке, я бы обернул ее в div или span с помощью display: block.

Если вы действительно не можете обернуть его в чем-то, вы можете попробовать это:

&:before { 
    clear: both; 
} 

Внутри вашего определения .readmore.

Что касается умолчанию правило, эти несколько способов, вы можете исправить это, вы можете либо пойти:

a.readmore { 
    // etc 
} 

Или (это относится .readmore ко всем ссылкам на странице)

a { 
    .readmore; 
} 

Предполагая, что ваш код МЕНЬШЕ.