html地址包装,HTML包装不当

我知道这很简单。

我有一个按钮:

href="#">

{{ question.description }}

这个

fa

类是隐藏的,这取决于按钮状态(我使用的是bootstrap btw)。它的CSS如下所示:

.btn-choice {

@include make-text-sizes($h1-sizes);

font-weight: 300 !important;

color: white !important;

background-color: $midnight;

display: block;

margin-bottom: 30px;

text-align: left;

.header {

padding: 0.375rem 0.75rem;

}

.title {

padding-right: 40px;

display: block;

}

.fa {

float: right;

display: none;

margin-top: 7px; // Center vertically?

}

&:hover,

&:focus {

font-weight: 400 !important;

background-color: $cyan;

.fa-square {

display: block;

}

}

&:active,

&.active {

font-weight: 400 !important;

background-color: $cyan;

.fa-check-square {

display: block;

}

.fa-square {

display: none;

}

}

}

现在,我正试图让标题有一些填充,这样它就不会与“方形复选框”重叠,但我不能让它工作。

如你所见,

.title

设置为一个块,并且我已经正确设置了一些填充。

如果我检查我的元素,我可以看到这个大纲在链接中,但是文本只是继续通过它。

这里有一个关于这个问题的代码笔: