                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /企业网站综合布局实战

求解答字大小这些在哪控制为什么

有个问题求解答：为什么行高这些在li中控制而字的大小这些却在a中控制，但是字体又在li中控制。我尝试过了在li中控制不了这是为什么？

qq_孤注一掷_0

2016-02-22

源自：企业网站综合布局实战 3-17

关注问题我要回答

682

操作

收起

1 回答

卡迪亚兹
2016-02-22

因为你的字体是写在a标签里面的。所以字体的大小是在a标签中控制，

另外，行高，也是可以在a中控制的。

用a和li控制会有少许的不同。尤其是设置width和height之后。举个栗子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

.one li
{
	height: 30px;
	width: 70px;
	background-color: #ccc;
	float: left;
	margin-left: 5px;
	text-align: center;
	line-height: 30px;
	list-style: none;

}

.one li a:hover
{
	color: #fff;
	background: red;
}


.two li
{
	list-style: none;
}

.two li a
{
	height: 30px;
	width: 70px;
	background-color: #ccc;
	float: left;
	margin-left: 5px;
	text-align: center;
	line-height: 30px;
	display: inline-block;
}

.two li a:hover
{
	color: #fff;
	background: red;
}

</style>
</head>

<body>

<ul class="one">
	<li><a href="#">首页</a></li>
	<li><a href="#">首页</a></li>
	<li><a href="#">首页</a></li>
</ul>

<ul class="two">
	<li><a href="#">首页</a></li>
	<li><a href="#">首页</a></li>
	<li><a href="#">首页</a></li>
</ul>
</body>
</html>

你看这段代码,

.one是将很多样式写在li标签中

.two则是将样式写在a标签中

然后都使用了hover

你自己对比下效果你就懂了。。