为什么 div和a的高度不对齐呢一高一低不是在同一行么-慕课网

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

为什么 div和a的高度不对齐呢一高一低不是在同一行么

来源：12-4 我还要站个大位置 - 内联块状元素

Zz张浩

2016-03-08 11:49

<!DOCTYPE HTML>

<html>

<head>

<title>内联块状元素</title>

div,a{

display:inline-block;

width:20px;/*在默认情况下宽度不起作用*/

height:20px;/*在默认情况下高度不起作用*/

background:pink;/*设置背景颜色为粉色*/

text-align:center; /*设置文本居中显示*/

}

</style>

</head>

<body>

<div></div

><div><a href="#">1</a>

</div>

</body>

</html>

写回答关注

9回答

Dearly_love

2016-03-08 12:06:44

已采纳

<div></div>
<div><a href="#">1</a></div>
你写了两个div,前一个是空的，你在前一个输入数值就一样高了

2 0

Zz张浩回复Zz张浩

如果是列表还要跟他行数一样才能对齐

2016-03-08 12:15:10

共 2 条回复 >

inro: 2016-03-08 12:14:41

div,a{
   display:block;/*block将标签设置为块元素*/
float:left;/*float:left将标签设置为块级元素*/
width:20px;/*在默认情况下宽度不起作用*/
height:20px;/*在默认情况下高度不起作用*/
background:pink;/*设置背景颜色为粉色*/
text-align:center; /*设置文本居中显示*/
}
<!--第二行、第三行代码均将代码设置为块级元素，当然就不在一行喽，将第二行改为diskplay:inline-block即可。题主可以去复习下block和inline-block的区别-->

0 0

丨枫墙丨

2016-03-08 12:14:06

要加一个float:left 浮动

0 0
床頭小熊熊

2016-03-08 12:13:30

a 标签是行内元素，所以设置它的 width 是没有效果的，但是设置为 position:absolute 以后，就可以了。

0 0
慕沐0644911

2016-03-08 12:01:47
```
float:left;
```
0 0
繁华如梦倾城殇

2016-03-08 12:00:28

宽度不够

1 0

Zz张浩

高度不一样应该不是宽度的问题吧

2016-03-08 12:05:49

共 1 条回复 >
Dearly_love

2016-03-08 11:59:17

<div></div
><div><a href="#">1</a>
</div>
你写了两个div

0 0

慕沐0644911: 2016-03-08 11:58:46

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

2 1

慕沐0644... 回复Zz张浩

因为第一个DIV是空的

2016-03-10 09:02:24

共 2 条回复 >

单翅

2016-03-08 11:57:52

div,a{
display:block;
float:left;
width:20px;/*在默认情况下宽度不起作用*/
height:20px;/*在默认情况下高度不起作用*/
background:pink;/*设置背景颜色为粉色*/
text-align:center; /*设置文本居中显示*/
}

0 0