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

Issue

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!

Solution

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.

Answered By – nah0131

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.