-3

i'm making an test html webpage and i need to put 2 paragraphs in one line because i have an script for the two paragraphs, but i cant put it into only one line (sorry for my bad english) the full html code is here: https://pastebin.com/gZmLXxPR , the script:https://pastebin.com/wc01gjUy , and the css style: https://pastebin.com/d7d3AJFN

var counter = 1;

function upvote() {
  counter = counter + 1;

  document.getElementById("Likes")
    .innerHTML = counter + " Likes";
}
<h1>PANDA</h1>
<img id="imagen1" src="img/panda.jpg">
<p color="blue" id="texto"><em>LIKE SI ES MONO</em></p>
<div id="section">
  <td>
    <p id="Likes">1 Likes</p>
    <p id="DisLikes">1 DisLikes</p>
  </td>
</div>
<img id="upvote" src="img/like.png" hspace="20" vspace="10" onclick="upvote()">
<img id="downvote" src="img/dislike.png" hspace="20" vspace="10" onclick="downvote()">

Ok, the paragraphs code is that:

<div id="section">
<td>
   <p id="Likes">1 Likes</p>
   <p id="DisLikes">1 DisLikes</p>
</td>
</div>

so i need to put that in only one line

E_net4
  • 27,810
  • 13
  • 101
  • 139
QuantumGerYT
  • 1
  • 1
  • 3
  • 2
    You could set their display to inline-block, or consider if they actually need to be paragraph elements, or could they be spans – Taplar Apr 03 '20 at 17:06
  • 1
    A paragraph by definition are self-contained units. Consider using a different tag such as span: `Likes` – phobos Apr 03 '20 at 17:06
  • You can use `display: inline-block;` or create some flexbox layout. But... Can you please edit the question and put the relevant code here? – Álvaro González Apr 03 '20 at 17:11
  • You should put your code into the question and exclude any code that is not necessary to reproduce the problem. I did that for you this time as an example but your question still doesn't make a lot of sense. Please see https://stackoverflow.com/help/how-to-ask I don't see a script that requires two tags – Ruan Mendes Apr 03 '20 at 17:12
  • 1
    Please stop suggesting `` just for the looks. We're in 2020, it's about time we stop mixing semantics and layout. – Álvaro González Apr 03 '20 at 17:13
  • I've seen your edit. Your HTML is pretty broken (you can't have ``s outside tables), I suggest you fix it to make styling easier. Also, you haven't really shared any attempt to accomplish it! – Álvaro González Apr 03 '20 at 17:15
  • @ÁlvaroGonzález If you read the existing code, the existing `

    ` is not semantic, a `` probably makes more sense. Yes, let's use semantic HTML but let's be careful when complaining.

     – Ruan Mendes Apr 03 '20 at 17:15

6 Answers6

2

You can put them in spans:

<p>
     <span id="Likes">1 Likes</span>
     <span id="DisLikes">1 DisLikes</span>
</p>
Majed Badawi
  • 27,616
  • 4
  • 25
  • 48
2

Be sure to review your HTML elements; you should never use <td> the way you are using them. <td> are used in <table> elements. Your code should look something like this:

HTML

<div id="section">
    <p class="inline" id="Likes">1 Likes</p>
    <p class="inline" id="DisLikes">1 DisLikes</p>
</div>

CSS

.inline {
    display: inline-block;
}
ckingchris
  • 559
  • 1
  • 12
  • 25
1

Use <span> instead of <p> . By default <p> is a paragraph and take the full width of your screen More intels about HTML

TheoWckr
  • 209
  • 1
  • 4
  • This is not a great solution because a `

    ` tag has a semantic meaning. It is important to understand the fundamentals of "why" this would work and the reason is because a "

    " tag is a block level element where as a "" is not. The correct solution is to use css to display the "

    " tags to "display: inline-block;".

    – Stephen Burke Apr 03 '20 at 17:11
  • 2
    @sburke In this case, they're not paragraphs anyway, a span would be more semantic. Sure you can use CSS instead of changing the tag but your comment is just wrong in this case – Ruan Mendes Apr 03 '20 at 17:14
  • @JuanMendes Yes you're correct, I missed that detail that it is in a table. Thanks. – Stephen Burke Apr 03 '20 at 17:20
1

A paragraph is a block unit by default. If you want two HTML elements to show on the same line, consider using span elements instead of p.

<span id="Likes">1 Likes</span>
<span id="DisLikes">1 DisLikes</span>

Or, if you really, really need the elements to stay as paragraphs, set their CSS display to inline-block.

Anis R.
  • 6,656
  • 2
  • 15
  • 37
1

You can also add this line of code into your CSS file to define the line on each paragraph you do on your HTML file.

line-height:26px;
display: inline-block;

I am sure this will work on your CSS class, good luck on your project.

Pedro Carvalho
  • 112
  • 9
0

You can use CSS property display:inline-flex and make sure to use this CSS property inside td tag.

Dharman
  • 30,962
  • 25
  • 85
  • 135