问答详情
源自：3-17 企业网站制作之底部版权区制作

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

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

提问者：qq_孤注一掷_0 2016-02-22 19:48

个回答

  • 卡迪亚兹
    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

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

    0