Is there a way to stop html from making line breaks when a tag is in another tag?-CodePudding

So I would like to make a calculator with some formatting to make it look nice. It keeps making a new line for my p tag and I don't want it to, is there any fix for this?

var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
var display = document.getElementById("disp");

function addAndDisplay() {
  display.innerHTML = (Number(n1.value) Number(n2.value)).toString();
}

<!DOCTYPE html>
<html>
  <head>
    <title>Addition</title>
  </head>
  <body>
    <h1>Addition</h1>
    <h3>Value one:</h3>
    <input type="number" id="n1">
    <h3>Value two:</h3>
    <input type="number" id="n2">
    <br>
    <button onclick="addAndDisplay()">Add</button>
    <h3>The output: <p id="disp">You have not calculated anything yet</p>.</h3>
  </body>
</html>

EDIT: Thanks @Pipe and @Pointy I appreciate your help a lot!

CodePudding user response：

Per default, a paragraph is a block level element. This means that it starts on a new line and takes up the full width. Maybe you should consider using something else.

For this kind of usecase, you would want to use <span></span>. Span is using display: inline which allows multiple inline-elements to appear next to each other.

It might be useful to read this article about the CSS display property - it will help you understand the suggested solution much better.

CodePudding user response：

you shuld use span instead of p. p is paragraph element and span can be used to group elements for styling purposes

CodePudding user response：

var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
var display = document.getElementById("disp");

function addAndDisplay() {
  display.innerHTML = (Number(n1.value) Number(n2.value)).toString();
}

p{
display:inline-block;}

<!DOCTYPE html>
<html>
  <head>
    <title>Addition</title>
  </head>
  <body>
    <h1>Addition</h1>
    <h3>Value one:</h3>
    <input type="number" id="n1">
    <h3>Value two:</h3>
    <input type="number" id="n2">
    <br>
    <button onclick="addAndDisplay()">Add</button>
    <h3>The output: <p id="disp">You have not calculated anything yet</p>.</h3>
  </body>
</html>