making span tag cover entire width of div

问题

I have the following structure for html:-

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

If I want the span to cover the entire width of the div, how can I do that in chrome?

I tried in css using

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

It works in firefox and ie but not in chrome.

回答1:

span elements are inline. Inline elements adjust their width automatically and ignore your width: expressions.

Make it block-level:

span {
    display: block;
}

But then it's basically just a <div>.

回答2:

There are two ways to resolve your issue.

As span tags adjust their width according to the contents in it. So to assign width to this tag we will use float left with width.

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

secod way is to use display block with the code

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

回答3:

Change span's CSS to:

span {
display: block;
}

回答4:

Try this:

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

来源：https://stackoverflow.com/questions/14746560/making-span-tag-cover-entire-width-of-div