求解答字大小这些在哪控制为什么-慕课网

首页课程实战体系课手记专栏慕课教程

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

来源：3-17 企业网站制作之底部版权区制作

qq_孤注一掷_0

2016-02-22 19:48

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

写回答关注

1回答

卡迪亚兹: 2016-02-22 21:04:33

因为你的字体是写在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

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

2 0

卡迪亚兹回复qq_孤注一...

文字是在a标签里面，li标签里面没有文字。

2016-02-23 17:22:27

共 2 条回复 >

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法