CSS: Как сделать ссылку на span для расширения?

Question

Я пытаюсь создать ссылку внутри кнопки div, чтобы при наведении указателя мыши на элемент div он обнаруживал ссылку из-за свойства css

display:block;width:100%;height:100%;

Используя div, он работает нормально, но я пытаюсь использовать его как промежуток, но дисплей смещен. Как я могу сделать правильный дисплей?

Вот код:

<style>
.link-rounded-button {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border: 1px solid #828282;
    padding:0 0 0 3px;
    /* for test purposes, expand the width */
    width:200px;
}

.link-block {
    display:block;
    width:100%;
    height:100%;
}
</style>

<div class="link-rounded-button">
    <a class="link-block" href="#">this is a link inside a div</a>
</div>
<hr />
<!-- If I make the div to a span, the display is not correct. -->
<span class="link-rounded-button">
    <a class="link-block" href="#">this is a link inside a span</a>
</span>

Заранее спасибо:)

С уважением, Mark

Answer 1

Сделайте также <span> элементом уровня блока. Делая display: block; для тега <a>, вы делаете его элементом уровня блока. A <span> является встроенным элементом. Вы не можете иметь элемент уровня блока внутри встроенного элемента. Поэтому вы должны сделать свой <span> элементом уровня блока.

Следующий CSS достигнет этого:

SPAN.link-rounded-button {
    display: block;
}

Если вы используете <span>, чтобы сохранить все ссылки в одной строке, используйте следующее:

SPAN.link-rounded-button {
    display: inline-block;
}

ПРЕДУПРЕЖДЕНИЕ: IE6 и ниже поддерживает только inline-block для элементов, которые по умолчанию являются встроенными. Например, он не будет работать на <div>, но на <span>.

будет работать нормально.

---

Семантическое решение

Вы также можете отбросить лишние <div> или <span>, чтобы сделать ваш код более семантическим и при этом достичь того же эффекта (с дополнительным преимуществом наличия эффекта CSS :hover, который будет работать в IE6):

HTML:

<a class="link-rounded-button" href="#">this is a link with no extra markup</a>

CSS:

a.link-rounded-button {
    display: inline-block; 
    /* or display:block; depending of 
       the effect you are trying to achieve */

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border: 1px solid #828282;
    padding:0 3px;
}

a.link-rounded-button:hover {
    background-color: #828282;
}

Я установил демонстрационную версию этого решения.

Демонстрация семантического решения

---

Дополнительная информация

Вот список элементов, которые считаются элементами уровня блока или принимают элементы уровня блока как дочерние элементы.

XHTML 1.0 Элементы уровня блока

Answer 2

Отображение диапазона по умолчанию - inline , поэтому размещение внутри него элемента блока не даст ожидаемых результатов. Добавьте дисплей: блок к кнопке .link-округлено.

Answer 3

Попробуйте добавить

display: block;

к вашему стилю .link-округлые кнопки.