宽度<a> element into a </a> <li> <a> element

Question

I have a link into a li element, and I would like my element to have the same size (100%) than his parent (li).

This is my code, I'm using HTML5, CSS3 and AngularJS (don't know if it's important ^^) :

<ul id="music-list">
    <li ng-repeat="music in musics" class="music-li">
        <a href="{{music.url}}" class="music-link"><strong>{{music.artiste}}</strong> - {{music.titre}}</a>
    </li>
</ul>

And CSS :

.music-li{
    list-style-type: none !important;
    float: left;
    width: 100%;
    background-color: #183152;
    color: #E1E6FA;
    padding: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    cursor: pointer;
}

.music-li:hover{
    background-color: #ABC8E2;
    transition: 0.5s;
}

.music-link > a {
    width: 100%;
}

.music-link{
    text-decoration: none;
}

正如你在图片中看到的那样，我的宽度并不宽。

Answer 1

您无法在内联元素上设置宽度。做这样的事情：

li a {display: block;}

Answer 2

您必须更改此规则的选择器：

.music-link > a {
    width: 100%;
}

必须为a.music-link，因为.music-link是a元素本身的类，而不是其子元素。另外，正如isherwood所写，添加display: block：

a.music-link {
    display: block;
    width: 100%;
}