                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

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

<!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></div

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

</div>

</body>

</html>

Zz张浩

2016-03-08

源自：初识HTML(5)+CSS(3)-升级版 12-4

关注问题我要回答

2240

操作

收起

9 回答

Dearly_love 回答被采纳 +3 积分
2016-03-08

<div></div>

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

你写了两个div,前一个是空的，你在前一个输入数值就一样高了

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

#1

Zz张浩提问者

嗯嗯我也才发现

2016-03-08 回复有任何疑惑可以回复我~

#2

Zz张浩提问者回复 Zz张浩提问者

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

2016-03-08 回复有任何疑惑可以回复我~

inro
2016-03-08

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 回复有任何疑惑可以回复我~

丨枫墙丨
2016-03-08

要加一个float:left 浮动

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

床頭小熊熊
2016-03-08

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

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

慕沐0644911
2016-03-08

float:left;

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

繁华如梦倾城殇
2016-03-08

宽度不够

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

#1

Zz张浩提问者

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

2016-03-08 回复有任何疑惑可以回复我~

Dearly_love
2016-03-08

<div></div

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

</div>

你写了两个div

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

慕沐0644911
2016-03-08

<!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>

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

#1

Zz张浩提问者

我也试出来了为什么不一样的元素转化为内联块状元素高低不一样啊

2016-03-08 回复有任何疑惑可以回复我~

#2

慕沐0644911 回复 Zz张浩提问者

因为第一个DIV是空的

2016-03-10 回复有任何疑惑可以回复我~

单翅
2016-03-08

div,a{

display:block;

float:left;

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

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

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

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

}

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

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1225792 人
解答问题 18234 个

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

本课相似问答

5 回答为什么两个ul 不能水平对齐呢并排了但是一个高一个低

2 回答设置宽度，为什么高度不设置就不对

3 回答行高和宽度有什么区别？

1 回答为什么bottom的高度是50px？？？

4 回答css样式中的{}不能在写在同一行？编辑器里面为什么有些是在同一行，有些不在同一行?

搜索更多本课相关问答

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

我要回答关注问题

意见反馈帮助中心 APP下载