Question

我注意到，当我在我的内联块div中有文本时，它们向下移动而不是保持原位如何解决这个问题，以便与其他文本内部保持一致？

截图

Screenshot

HTML

<html>
<head>
    <title>My Web site</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="home.css">
</head>
<body>
    <div id="container">
        <div id="jumbotron">

        </div>
        <center>
            <div class="listbox">
                <h1>exapmle</h1>
            </div>
            <div class="listbox">
            </div>
        <div class="listbox"></div>
        </center>
       <!-- container end div -->
    </div>
</body>
</html>

CSS

#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;
}

Answer 1

将vertical-align:top;应用于您的.listbox CSS课程。此问题是由默认vertical-align值（baseline）引起的，因此当存在文本时，它会影响所有内联元素的基线，并将文本向下推送一个。

JSFiddle

Answer 2

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

将vertical-align: middle添加到.listbox

Answer 3

因为你在这里有<h1>标签： -

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

您尚未为其指定任何规则。尝试将此添加到您的CSS： -

h1 { float: left; }

为什么我的div在他们有文本的时候在页面上向下移动？我该如何解决这个问题？

3 个答案:

JSFiddle