Question

我想要左侧的主文本（hello）和屏幕右侧的背景文本（加载），但是与主文本垂直对齐。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="load.css">
  <title>Hello</title>
</head>

<body>
  <div class="textContainer">
    <p class="hello">Hello</p>
    <div class="backgroundInfo">
      <div class="spinner"></div>
      <p class="notifText">Loading</p>
    </div>
    <div class="loader"></div>
  </div>
</body>

</html>

（旋转器和加载器是css动画）

Answer 1

试试这个：

.hello {
    float: left;
}

.notifText{
    float: right;
}

.loader {
    clear: both;   
}

<div class="textContainer">
   <p class="hello">Hello</p>
   <div class="backgroundInfo">
      <div class="spinner"></div>
       <p class="notifText">Loading</p>
   </div>
   <div class="loader"></div>
</div>

Answer 2

要使两个段落显示在同一行，只需使用：

p{
    float: left;
}

下一步将是两个元素和投币器的CSS宽度。

将多个段落标记放在同一行上

2 个答案: