HTML + CSS：'a'宽度不起作用
[英]HTML+CSS: 'a' width doesn't work
问题描述
I have the following code: 
我有以下代码：
CSS part: CSS部分：
<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: HTML部分：
Everything work fine, but when I add 'DOCTYPE' element in the beginning of the HTML document: 一切正常，但是当我在HTML文档的开头添加'DOCTYPE'元素时：
<!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. 不考虑'a'元素的宽度。
Question 1: Why? 问题1：为什么？
Question 2: How to fix that? 问题2：如何解决这个问题？
Thanks a lot! 非常感谢！
7 个解决方案
解决方案1
107 已采纳 2011-01-16 17:41:14
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; 使用display: block;将其设为块元素display: block; , or an inline block by display: inline-block; ，或display: inline-block;的内联块display: inline-block; . 。
解决方案2
6 2011-01-16 18:52:16
make block for anchor tag add display:block in style 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. 注意：不要重复.menu a:link类中的所有元素..只需添加更改或新样式。 NOTE: always use lowercase in html and css code 注意：始终在html和css代码中使用小写
解决方案3
3 2013-04-16 17:13:56
这对我有用，但由于我希望我的所有链接都在同一行，我使用display: inline-block;
解决方案4
3 2011-01-16 17:43:31
add display block in a : 在a中添加显示块：
.menu A
{
display: block;
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
解决方案5
2 2011-01-16 17:42:16
A link is an inline element by default; 默认情况下，链接是内联元素; add display: block; 添加display: block; and it'll use the set width. 它会使用设定的宽度。
解决方案6
2 2011-01-16 17:42:42
CSS is all about point. CSS就是重点。 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. 这将有助于理解基础知识和更多内容。
解决方案7
0 2013-09-07 09:07:18
.menu A
{
float: left;
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.