css - 使 span 标签覆盖 div 的整个宽度

Question

我有以下html结构：-

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

如果我希望跨度覆盖 div 的整个宽度，我该如何在 chrome 中做到这一点？

我尝试在css中使用

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

它适用于 Firefox 和 ie，但不适用于 chrome。

Answer 1

span元素是内联的。内联元素会自动调整其宽度并忽略您的width:表达式。

使其成为块级：

span {
    display: block;
}

但它基本上只是一个<div>.

Answer 2

有两种方法可以解决您的问题。

作为 span 标签根据其中的内容调整它们的宽度。所以为了给这个标签分配宽度，我们将使用带有宽度的左浮动。

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

第二种方法是使用带有代码的显示块

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

Answer 3

将 span 的 CSS 更改为：

span {
display: block;
}

Answer 4

试试这个：

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