Quiero colocar el saldo en la esquina superior derecha del sitio web, pero por algún motivo no puedo obtener la etiqueta p junto a la etiqueta h1. Soy muy nuevo en HTML y CSS. Cualquier ayuda es apreciada. Intenté agregar visualización en línea para la etiqueta h1 y flotar a la derecha para la etiqueta p como lo sugiere otra publicación que vi. También intenté configurar la etiqueta p en el bloque en línea.
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>Puede alinear dos elementos de bloque usando flexbox. Asigne a su div que envolvió la etiqueta h1 y p una clase como, por ejemplo, .line.
.line { display: flex; align-items: center; justify-content: center; gap:20px; }en tu 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> Pequeña nota a su código: usa esto en sus etiquetas: display="inline" . que no tiene efectos. si desea un estilo en línea, debe escribir: 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><h1 display="inline"> no funcionará como se esperaba, no hay un atributo de display en HTML. En su lugar, puede usar CSS en una hoja de estilo o usar el atributo de style como este: <h1 style="display:inline;">
...y similares para otros estilos en línea.