Почему весь мой div кликабелен, а не только ссылка?

Question

У меня есть этот код:

<div class="row">
    <div class="col-sm-12 col-md-6">
        <span> Test text </span>
    </div>

    <a href="#" class="col-sm-12 col-md-6 align-self-center text-md-right ng-scope">This is a link 
    </a>
</div>

Я проверил это и заметил, что мой тег <a> кликабелен во всем div, но я совершенно не понимаю, почему. Может кто-нибудь сказать мне, что я делаю здесь не так?

Вот кодовый код: https://www.codeply.com/p/UieZQL1mHw

Answer 1

 <a href="http://example.com">
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <span> Test text </span>
        </div>

        <a href="#" class="col-sm-12 col-md-6 align-self-center text-md-right ng-scope">This is a link </a>
    </div>
    </a>

Используйте это. Полный div будет кликабелен.

Answer 2

Оберните ваш a тег на div как:

 <div class="row">
        <div class="col-sm-12 col-md-6">
            <span> Test text </span>
        </div>

        <div class="col-sm-12 col-md-6 align-self-center text-md-right ng-scope">
           <a href="#" class="">This is a link 
           </a>
    </div>

</div>