Question

body {
  background-color: rgb(30, 21, 120);
}

p {
  color: white;
  font-size: 20px;
}

.package {
  border: 4px solid white;
  border-radius: 70px;
  margin: 60px 0px 60px 0px;
  background-color: rgb(37, 110, 194);
}

p.package {
  color: white;
  font-size: 25px;
  padding-left: 100px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="package">
    <div nowrap>
      <p>Recommended Package</p>
      <button value="Purchase">Purchase</button>
    </div>
  </div>
</body>

</html>

我试图在其中放入文本框，并试图在文本右侧放置一个按钮。但是，每当我使按钮浮动到右侧或嵌套div时，按钮最终就会位于文本下方，或者整个框会中断。我还使用了display：indiv on divs（这打破了盒子）。我希望按钮看起来像这样：

但是，它看起来像这样：

Answer 1

将display: inline;添加到<p>。默认值为block，这意味着<p>将在屏幕的整个宽度上延伸。将其设置为内联将意味着它仅占用所需的空间。

body {
  background-color: rgb(30, 21, 120);
}

p {
  color: white;
  font-size: 20px;
  display: inline;
}

.package {
  border: 4px solid white;
  border-radius: 70px;
  margin: 60px 0px 60px 0px;
  background-color: rgb(37, 110, 194);
}

p.package {
  color: white;
  font-size: 25px;
  padding-left: 100px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="package">
    <div nowrap>
      <p>Recommended Package</p>
      <button value="Purchase">Purchase</button>
    </div>
  </div>
</body>

</html>

Answer 2

在p标签上添加显示：内嵌块和垂直对齐：中间

按钮出现在下方而不是右侧

2 个答案: