如何在一行中2段html

Question

我正在制作一个测试html网页，我需要将2个段落放在一行中，因为我有两个段落的脚本，但是我不能只将其放在一行中（抱歉，我的英语不好）完整的html代码在这里：https://pastebin.com/gZmLXxPR，脚本：https://pastebin.com/wc01gjUy，和CSS样式：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()">

确定，段落代码是：

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

所以我只需要把它放在一行中

Answer 1

您可以将它们放在span中：

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

Answer 2

段落默认为块单位。如果要在同一行上显示两个HTML元素，请考虑使用span元素而不是p。

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

或者，如果您确实确实需要将元素保留为段落，请将其CSS display设置为inline-block。

Answer 3

请务必检查您的HTML元素；您永远不要以使用它们的方式使用<td>。 <td>用于<table>元素。您的代码应如下所示：

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;
}

Answer 4

使用<span>代替<p>。默认情况下，<p>是一个段落，占据屏幕的整个宽度More intels about HTML