Setting a width and height on an A tag

问题

Is it possible to set the width and height in pixels on an anchor tag? I'd like to have the anchor tag to have a background image while retaining the text inside the anchor.

li {
  width: 32px;
  height: 32px;
  background-color: orange;
}

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}

<li><a href="#">Something</a></li>

回答1:

You need to make your anchor display: block or display: inline-block; and then it will accept the width and height values.

回答2:

You can also use display: inline-block. The advantage of this is that it will set the height and width like a block element but also set it inline so that you can have another a tag sitting right next to it, permitting the parent space.

You can find out more about display properties here

回答3:

All these suggestions work unless you put the anchors inside an UL list.

<ul>
    <li>
        <a>click me</a>>
    </li>
</ul>

Then any cascade style sheet rules are overridden in the Chrome browser. The width becomes auto. Then you must use inline CSS rules directly on the anchor itself.

回答4:

It's not an exact duplicate (so far as I can find), but this is a common problem.

display:block is what you need. but you should read the spec to understand why.

回答5:

Below working for me

display: block;
width: 100%;

来源：https://stackoverflow.com/questions/4743254/setting-a-width-and-height-on-an-a-tag