- 此问题在此处已有答案**:
Align inline-block DIVs to top of container element(5个答案)
2天前关闭。
我想把三个粉红色的框排成一行,但是应用display:inline-block会在顶部创建一个空间,这是什么问题?
- --------------HTML语言--------------
<div class="hello">
<h1>이건 첫째</h1>
</div>
<div class="hello">
<h2>이건 둘째</h2>
<input type="text">
</div>
<div class="helloCss">
<h2>이건 셋째</h2>
<ul>
<li>Hello</li>
<li>Css</li>
<li>World!</li>
</ul>
</div>
<div class="helloJava">
<h2>이건 넷째</h2>
<ol>
<li>Hello</li>
<li>Java</li>
<li>World!</li>
</ol>
</div>
- ------------SCSS--------
$g:rgb(115, 115, 115);
@mixin box($color:pink){
color:$g;
background-color:$color;
width:200px;
height:300px;
border:2px solid $g;
}
.hello{
display:inline-block;
input{
margin:{
left:10px;
top:10px;
}
}
@include box();
h1{
background-color:rgb(238, 206, 219);
}
&Java{
@include box();
background-color:rgb(175, 202, 255);
}
}
.helloCss{
@extend .hello;
}
margin 0,padding 0,wrap in one div,将h1和h2更改为span即使我从开发人员工具中抬起鼠标,该区域也不会出现。
3条答案
按热度按时间i5desfxk1#
因为元素被归类为
inline
,浏览器默认情况下会将文本基线与相邻元素垂直对齐。如果你在文本的最后一行下画一条线,你会看到它们都被放置在彼此相邻的位置。更多信息来自MDN here
解决这个问题最简单的方法是添加
vertical-align: top
或类似的代码到你的css中,如下所示:xriantvc2#
正如Timothy提到的,这可能是inline-block的默认行为,但是,如果可以选择对HTML做一个微小的改变,那么用flex创建一个父div会更容易对齐div。
camsedfj3#
粉色框顶部的空格可能是由于inline-block元素的默认行为,它添加垂直空格,也称为"换行符"。要删除此空格,您可以添加font-size:0添加到父容器,然后将适当的字号添加到子元素。