Как я могу сделать ссылку внутри div заполнить все пространство внутри div?

У меня есть div, который имеет ширину набора и обернут вокруг ссылки. Я хочу, чтобы ссылка внутри заполнила все пространство div, так что, когда я нажимаю где-нибудь внутри div (который я назвал похожим на кнопку), он переходит к ссылке. Это то, что я пробовал, но .link_class не делает то, что я хочу. Любые предложения?

HTML:

<div class="button_class">
    <a class="link_class" href="#" onclick="location.href='http://www.my_link.com>My Link</a>
</div>

CSS

.button_class {
    width:150px;
    padding:5px 7px;
    color:#fff;
    text-align:center;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}

.link_class {
    width:100%;
    height:100%;
}

'; return false;

Ответы

Ответ 1

Это должно сделать трюк: -

По умолчанию a - это встроенный элемент, и ширина не влияет на них. Поэтому измените его на встроенный блок, чтобы он задал указанную вами ширину.

.link_class {
    display:inline-block;
    width:100%;
    height:100%;
}

Fiddle

Ответ 2

Вот Решение.

HTML:

<div class="button_class">
    <a class="link_class" href="http://www.my_link.com">My Link</a>
</div>

CSS:

.button_class {
    width:150px;
    color:#fff;
    text-align:center;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    background:blue;
}

.link_class {
    display:block;
    color:#ffffff;
    overflow:auto;
    padding:5px 7px;    
}

Надеюсь, что это поможет.

Ответ 3

Это сработало. Ключ должен был явно установить высоту div, а затем использовать line-height в ссылке.

.button_class {
    width:150px;
    height:30px;
    color:#fff;
    text-align:center;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}

.link_class {
    display:inline-block;
    width:100%;
    line-height:30px;
}

Ответ 4

Зачем использовать внешний div на первом месте? Напишите весь свой код для ссылки и покажите свою ссылку в виде кнопки. Это упростит вашу проблему.

.link_class{width:150px;height:30px;color:#fff;text-align:center;display: block;
           -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;
           /*some other styles*/}

Проверьте это демо: Fiddle

Ответ 5

Вам нужно сделать ссылку элементом уровня блока.

.link_class {
    display: block;
}