Html 当我的div中有文本时，它们会在页面上向下移动什么？我该如何解决这个问题？

我已经注意到，当我的内联块div中有文本时，它们会向下移动，而不是保持在原来的位置上。我如何修复这个问题，使其与其他内联块div中的文本保持一致

截图

HTML

---

应用

垂直对齐：顶部

到您的

.listbox

CSS类。此问题是由于默认的

垂直对齐

值（

基线

）造成的，因此当存在文本时，它会影响所有内联元素的基线，并向下推一个带有文本的元素

---

这种情况正在发生，因为浏览器正在尝试匹配所有内联元素的基线

将

垂直对齐：中间
添加到
.listbox
它是因为您在这里有
标记：-

<div class="listbox">
    <h1>exapmle</h1>
</div>

这解决了问题。谢谢
#container{
    height:100%;
    width:100%;
    background-color: #669999;
    padding: 5px 5px 5px 5px;
}
.listbox{
    height: 250px;
    width: 250px; 
    background-color: #003333;
    display:inline-block;
    border-radius:5px;
}
#jumbotron{
    margin:2px auto 5px auto;
    background-color:black;
    border-radius:5px;
    height:450px;
    width:900px;
    color:#ffffff;
}

<div class="listbox">
    <h1>exapmle</h1>
</div>

h1 { float: left; }