HTML + CSS：'a'宽度不起作用
[英]HTML+CSS: 'a' width doesn't work
问题描述
我有以下代码：
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部分：
一切正常，但是当我在HTML文档的开头添加'DOCTYPE'元素时：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
不考虑'a'元素的宽度。
问题1：为什么？
问题2：如何解决这个问题？
非常感谢！
7 个解决方案
解决方案1
107 已采纳 2011-01-16 17:41:14
问题1：为什么？
因为它默认不是块元素 。
问题2：如何解决这个问题？
使用display: block;将其设为块元素display: 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
.menu a
{
display:block;
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
注意：不要重复.menu a:link类中的所有元素..只需添加更改或新样式。 注意：始终在html和css代码中使用小写
解决方案3
3 2013-04-16 17:13:56
这对我有用，但由于我希望我的所有链接都在同一行，我使用display: inline-block;
解决方案4
3 2011-01-16 17:43:31
在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
默认情况下，链接是内联元素; 添加display: block; 它会使用设定的宽度。
解决方案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 ;
}
html + css usemap不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.