html - Div元素内的P元素改变Div的位置

问题描述

我试图将这两个 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>

标签： htmlcssvertical-alignment

你可以使用显示弹性

  <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>

html - Div元素内的P元素改变Div的位置

问题描述

解决方案

推荐阅读