似乎无法将 h1 标签与 p 标签放在同一行

Question

我想将余额放在网站的右上角，但由于某种原因我无法在 h1 标签旁边找到 p 标签。我对 HTML 和 CSS 很陌生。任何帮助表示赞赏。我试图按照我看到的另一个 post 的建议为 h1 标签添加内联显示并为 p 标签添加右浮动。我也试过将 p 标签设置为内联块。

body {
    text-align: center;
    font-family: sans-serif;

}

.cards {
    height: 175px;
    width: 125px;
    margin: 1px;
}

.hitButton {
    width: 100px;
    height: 50px;
    font-size: 20px;
}
.resetButton {
    width: 125px;
    height: 50px;
    font-size: 20px;
}
.standButton {
    width: 100px;
    height: 50px;
    font-size: 20px;
}

.slidecontainer{
    text-align: center; 
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>first js website</title>
  <link rel = "stylesheet" href="style.css"> 
  <script src="app.js"></script>
</head>
<body>
  <div>
    <h1 display="inline"> Dealer:<span id="dealer-sum"></span> </h1>
    <p display="inline-block">Balance: <span id="balanceAmt">50</span>$ </p>
  </div>
  <div id="your-cards">  </div>
    <h1 class="center">Player:<span id="player-sum"></span></h1>
    <div class="slidecontainer">
      <p>You will bet: <span id="betAmt">0</span>$. Next round</p>
      <input type="range" min="0" max="100" value="0" class="slider" id="betSlider" oninput="updateSlider()">
    </div>
  <div>

    <br>
      <button class="hitButton" id="hitId" onclick="hit()">Hit</button>
      <button class="standButton" id="stanId" onclick="stand()">Stand</button>
      <button class="resetButton" id="resetId" onclick="resetGame()">Deal Cards</button>
  </div>
  <h1 id="result"></h1>
</body>
</html>

Answer 1

您可以使用 flexbox 对齐两个块元素。分配给包装 h1 和 p 标签的 div 一个 class ，例如 .line.

.line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:20px;
}

在你身上html

<body>
  <div class="line"> <!-- <<<<< add this class -->
    <h1> Dealer:<span id="dealer-sum"></span> </h1>
    <p>Balance: <span id="balanceAmt">50</span>$ </p>
  </div>

代码小提示： 你在你的标签中使用这个：display="inline"。那没有效果。如果你想要内联样式，那么你必须写：style="display:inline;".

body {
    text-align: center;
    font-family: sans-serif;

}

.cards {
    height: 175px;
    width: 125px;
    margin: 1px;
}

.hitButton {
    width: 100px;
    height: 50px;
    font-size: 20px;
}
.resetButton {
    width: 125px;
    height: 50px;
    font-size: 20px;
}
.standButton {
    width: 100px;
    height: 50px;
    font-size: 20px;
}

.slidecontainer{
    text-align: center; 
}

.line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>first js website</title>
  <link rel = "stylesheet" href="style.css"> 
  <script src="app.js"></script>
</head>
<body>
  <div class="line">
    <h1> Dealer:<span id="dealer-sum"></span> </h1>
    <p>Balance: <span id="balanceAmt">50</span>$ </p>
  </div>
  <div id="your-cards">  </div>
    <h1 class="center">Player:<span id="player-sum"></span></h1>
    <div class="slidecontainer">
      <p>You will bet: <span id="betAmt">0</span>$. Next round</p>
      <input type="range" min="0" max="100" value="0" class="slider" id="betSlider" oninput="updateSlider()">
    </div>
  <div>

    <br>
      <button class="hitButton" id="hitId" onclick="hit()">Hit</button>
      <button class="standButton" id="stanId" onclick="stand()">Stand</button>
      <button class="resetButton" id="resetId" onclick="resetGame()">Deal Cards</button>
  </div>
  <h1 id="result"></h1>
</body>
</html>

Answer 2

<h1 display="inline"> 不会按预期工作，HTML 中没有 display 属性。相反，您可以在样式表中使用 CSS，或像这样使用 style 属性：<h1 style="display:inline;">

...其他内联样式也类似。

似乎无法将 h1 标签与 p 标签放在同一行

Can't seem to put h1 tag on the same line as a p tag

html

javascript

css