HTML+CSS: 'a' 宽度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4706921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML+CSS: 'a' width doesn't work
提问by Budda
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?
问题一：为什么？
Question 2:How to fix that?
问题2：如何解决？
Thanks a lot!
非常感谢！
回答by BalusC
Question 1: Why?
问题一：为什么？
Because it's by default not a block element.
因为它默认不是块元素。
Question 2: How to fix that?
问题2：如何解决？
Make it a block element using display: block;, or an inline block by display: inline-block;.
使用 将其设为块元素display: block;，或者通过将其设为内联块display: inline-block;。
回答by Abudayah
make block for anchor tag add display:blockin style
为锚标记制作块添加display:block样式
.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:linkclass.. just add changes or new styles.
NOTE:always use lowercase in html and css code
注意：不要在.menu a:link课堂上重复所有元素......只需添加更改或新样式。
注意：在 html 和 css 代码中始终使用小写
回答by schwechel
This worked for me, but since I wanted all of my links to be on the same line I used display: inline-block;
这对我有用，但由于我希望所有链接都在我使用的同一行上 display: inline-block;
回答by shankhan
add display block in a :
在 a 中添加显示块：
.menu A
{
display: block;
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
回答by Alec
A link is an inline element by default; add display: block;and it'll use the set width.
默认情况下，链接是内联元素；添加display: block;，它将使用设置的宽度。
回答by ChuckJHardy
CSS is all about point. Attribute take their place depending on this. Have a look at Google University'stake on the matter. This will help a lot in understanding the basics and a bit beyond.
回答by Bakul Sinha
.menu A
{
float: left;
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
