Div元素内的P元素改变Div的位置[重复]答案

【问题标题】：P element inside the Div element changes the position of Div [duplicate]Div元素内的P元素改变Div的位置[重复]
【发布时间】：2021-08-26 08:01:08
【问题描述】：

我试图将这两个 div 保持在同一行。但是每当我在第一个 Div 中添加一个 P 元素时，它就会移动到新行。我尝试将显示属性分配给每个元素的“inline-block”，但它不起作用。你能帮忙吗，我有以下代码：

.tile {
  height: 100px;
  width: 100px;
  background-color: rgb(250, 250, 156);
  border: 5px solid red;
  display: inline-block;
  vertical-align:top
}

p {
  display: inline;
  margin:0;
}

<div class="tile">
  <p>Hello</p>
</div>
<div class="tile"></div>

【问题讨论】：

使用vertical-align。默认情况下，这两个框在文本的基线上对齐。另外，请validate your HTML。
Duplicate of Why my inline-block divs are not aligned when only one of them has text?.

标签： html css vertical-alignment

【解决方案1】：

你可以使用显示弹性

  <html>
    <head>
        <title>Experiment</title>
    </head>
    <style>
      .container {
        display: flex
      }
      .tile{
            height:100px;
            width:100px;
            background-color: rgb(250, 250, 156);
            border:5px solid red;
        }

    </style>
    <body>
      <div class="container">
        <div class="tile"><p>Hello</p></div>
        <div class="tile"></div>
      </div>
    </body>
</html>

【讨论】：

这很有用，谢谢