css同等宽度下为什么li的宽度比a的宽度要小了？
<!DOCTYPEhtml><html><head><style>ul{list-style-type:none;margin:0;padding:0;overflow:...
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{width:130px;
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html> 展开
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{width:130px;
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html> 展开
展开全部
因为你在a标签上设置了padding:4px;
标签设置padding属性的情况下，浏览器所显示效果为：当前标签width+padding=实际显示宽度，
你这里a设置了width:130px;那么实际显示宽度就会是138px；
所以，你如果想让li与a宽度一样，那么a标签的宽度要减少8px；
当然，你这里所写的布局一般是不会出现宽度不同的问题，li设定float:left;后，宽度是根据内部a标签的实际宽度而自适应的
你只要了解了这个问题，以后写其他样式的时候就能有数了
标签设置padding属性的情况下，浏览器所显示效果为：当前标签width+padding=实际显示宽度，
你这里a设置了width:130px;那么实际显示宽度就会是138px；
所以，你如果想让li与a宽度一样，那么a标签的宽度要减少8px；
当然，你这里所写的布局一般是不会出现宽度不同的问题，li设定float:left;后，宽度是根据内部a标签的实际宽度而自适应的
你只要了解了这个问题，以后写其他样式的时候就能有数了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
CHROMEgh 一切正常，LI和A的都是138PX。。。
火狐下也一切正常，，
你LI没有设置宽度，所以 它宽度是A的宽度，，，
除非你用IE6或者7来看，，，PADDING在IE6下，你这种情况下是有可能会出现双倍内框，还有，父容器没有宽度的时候，不随内容宽度。
还有你的LI的list-style和PADDING,MARGIN在IE下是比较较真的。
火狐下也一切正常，，
你LI没有设置宽度，所以 它宽度是A的宽度，，，
除非你用IE6或者7来看，，，PADDING在IE6下，你这种情况下是有可能会出现双倍内框，还有，父容器没有宽度的时候，不随内容宽度。
还有你的LI的list-style和PADDING,MARGIN在IE下是比较较真的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
