问答详情
源自：12-4 我还要站个大位置 - 内联块状元素

这是为什么？

<!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://img.mukewang.com/5876eb190001b3a409480665.jpg

为什么只有1加了粉色背景，2没有加粉色背景？

提问者：水禾火 2017-01-12 10:35

个回答

  • heygirl
    2017-01-12 10:56:59
    已采纳

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

    1
  • bigfire
    2017-01-12 10:55:11

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

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

    0
  • mymick
    2017-01-12 10:48:52

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

    0