Покрытие span tag охватывает всю ширину div

У меня есть следующая структура для html: -

<div>
  <span>
    <a href="wherever">Wherever</a>
  </span>
</div>

Если я хочу, чтобы span охватывал всю ширину div, как я могу сделать это в chrome?

Я попытался использовать css, используя

span{
  background:#FFF;
  width:100%;
}

Он работает в firefox и т.д., но не в хроме.

Ответ 1

Элементы

span являются встроенными. Встроенные элементы автоматически настраивают свою ширину и игнорируют выражения width:.

Сделайте его блочным:

span {
    display: block;
}

Но тогда это в основном просто <div>.

Ответ 2

Существует два способа решения проблемы.

Так как теги span изменяют их ширину в соответствии с содержимым в ней. Поэтому для назначения ширины этого тега мы будем использовать float слева с шириной.

span{
 background:#FFF;
 width:100%;
 float: left;
}

Способ secod заключается в использовании блока отображения с кодом

 span{
 background:#FFF;
 width:100%;
 display: block;
}

Ответ 3

Изменить диапазон CSS на:

span {
display: block;
}

Ответ 4

Попробуйте следующее:

div{
    padding:0px;
}
span{
    background:#FFF;
    width:100%;
}