How to avoid going to new line with p tag?

Question

My desired Output is:-

Date: "current date"

My current code for this is:-

<p align="right">Date: </p>
    <p id="demo" align="right">
    <script>
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toDateString();
    </script>
</p>

which is giving me the output as:

Date:
"current date"

So how can I avoid new line so that I can get both the element on same line?

You might prefer to simply use other markup than P. P stands for paragraph. Paragraphs usually have more than 2-3 words. — Salketer, Aug 05 '14 at 06:36
Possible duplicate of [how to avoid a new line with p tag?](https://stackoverflow.com/questions/2076109/how-to-avoid-a-new-line-with-p-tag) — vahdet, Jun 25 '19 at 08:31

Mr. Alien · Answer 1 · 2014-08-05T06:45:43.103

10

You can change your markup but I assume that you have no control over your HTML, so, p is a block level element by default, hence you need to use display: inline-block; or display: inline;

p {
    display: inline; /* Better use inline-block if you want the p 
                        tag to be inline as well as persist the block 
                        state */
}

Demo

Just a heads up for you, take out you script tag out of the p element. Also note that you are using attribute to align your text, where you can do that with CSS like text-align: right; instead of ~~align="right"~~

edited Aug 05 '14 at 06:45

answered Aug 05 '14 at 06:34

Mr. Alien

153,751
34
298
278

where should I use it? – Sanil Sawant Aug 05 '14 at 06:35
for the p that you dont want to get a new line just use
Date:
or if you want to make it easy for you use a class for that p like this
Date:
and in your – Vivekh Aug 05 '14 at 06:36

score 4 · Answer 2 · answered Aug 05 '14 at 06:37

4

You're getting a lint break because there are two p's. Try this:

<p align="right" id="demo">Date: 
    <script>
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toDateString();
    </script>
</p>

answered Aug 05 '14 at 06:37

Mark

90,562
7
108
148

score 2 · Answer 3 · answered Aug 05 '14 at 06:41

2

You also shouldn't put script inside paragraph element. I suggest you re-formatting your code like this:

<p>Date: <span id="date"></span></p>
<script>
    var d = new Date();
    document.getElementById('date').innerHTML = d.toDateString();
</script>

answered Aug 05 '14 at 06:41

janhocevar

105
1
11

score 0 · Answer 4 · answered Aug 05 '14 at 06:38

<p align="right" id= "demo"> Date: </p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>

This should work. You were attaching the innerHTML to the nested p tag and hence you were getting a line break. And because of its block behaviour it was coming to the next line. Attach the innerHTML to the 1st p tag itself

How to avoid going to new line with p tag?

4 Answers4