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

为什么 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 11:49

个回答

  • Dearly_love
    2016-03-08 12:06:44
    已采纳

    <div></div>

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

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


    0
  • 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
  • 丨枫墙丨
    2016-03-08 12:14:06

    要加一个float:left 浮动

    0
  • 床頭小熊熊
    2016-03-08 12:13:30

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

    0
  • 慕沐0644911
    2016-03-08 12:01:47


    float:left;


    0
  • 繁华如梦倾城殇
    2016-03-08 12:00:28

    宽度不够


    0
  • Dearly_love
    2016-03-08 11:59:17

    <div></div

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

    </div>

    你写了两个div

    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>


    1
  • 单翅
    2016-03-08 11:57:52

    div,a{

       display:block;

    float:left;

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

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

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

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

    }


    0