HTML+CSS: 'a' width doesn't work
I have the following code:
CSS part:
<style type="text/css">
.menu
{
width:200px;
}
.menu ul
{
list-style-image:none;
list-style-type:none;
}
.menu li
{
margin:2px;
}
.menu A
{
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
.menu A:link
{
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
</style>
HTML part:
Everything work fine, but when I add 'DOCTYPE' element in the beginning of the HTML document:
<!DOCTYPE html 开发者_如何学运维PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
the width of 'a' element is not taken into account.
Question 1: Why?
Question 2: How to fix that?
Thanks a lot!
Question 1: Why?
Because it's by default not a block element.
Question 2: How to fix that?
Make it a block element using display: block;, or an inline block by display: inline-block;.
make block for anchor tag add display:block in style
.menu a
{
display:block;
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
NOTE: dont repet all elements in .menu a:link class.. just add changes or new styles.
NOTE: always use lowercase in html and css code
add display block in a :
.menu A
{
display: block;
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
This worked for me, but since I wanted all of my links to be on the same line I used display: inline-block;
A link is an inline element by default; add display: block; and it'll use the set width.
CSS is all about point. Attribute take their place depending on this. Have a look at Google University's take on the matter. This will help a lot in understanding the basics and a bit beyond.
.menu A
{
float: left;
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
加载中,请稍侯......
精彩评论