为了账号安全,请及时绑定邮箱和手机立即绑定

这是为什么?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内联块状元素</title>
<style type="text/css">
a{
    letter-spacing:50px;
	width:8px;height:50px;/*在默认情况下高度不起作用*/
	background:pink;/*设置背景颜色为粉色*/
	text-align:center; /*设置文本居中显示*/
    display:inline-block;
}
a>span{
    text-align:left;
}
</style>
</head>
<body>
<a><span>12</span></a>
<a>3</a>
<a>4</a>
</body>
</html>

http://img1.sycdn.imooc.com//5876eb190001b3a409480665.jpg

为什么只有1加了粉色背景,2没有加粉色背景?

正在回答

3 回答

首先你把a标签设置为inline-block,你设置的letter-spacing: 50px,比你a内联块元素的宽度还要大导致2跑出去了,你可以去掉letter-spaing属性,增加a标签的宽度,再试试!另外,a>span是没有作用的,因为span是行内元素!

1 回复 有任何疑惑可以回复我~
#1

水禾火 提问者

谢谢,明白了
2017-01-12 回复 有任何疑惑可以回复我~
#2

改名字啦已经

“a>span是没有作用的,因为span是行内元素!”请问这个意思是为了说明什么呢?
2017-03-02 回复 有任何疑惑可以回复我~
#3

darkqiank 回复 改名字啦已经

应该说的是span是内联元素所以不能设置text-align吧
2017-03-13 回复 有任何疑惑可以回复我~

width:8px;这个宽度太小,改得足够大就能看到2也是粉色了。

你规定了宽度和高度,那么背景色就是填充这个高度和宽度所覆盖的那个矩形。

0 回复 有任何疑惑可以回复我~
#1

水禾火 提问者

哦,谢谢
2017-01-12 回复 有任何疑惑可以回复我~

 display:inline-block; 这个样式的问题

0 回复 有任何疑惑可以回复我~
#1

水禾火 提问者

不就是吧a 变成了内联块状元素么 代码中12是连在一起的啊
2017-01-12 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1225762    人
  • 解答问题       18233    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

这是为什么?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信