css 将两个段落放在一起?

1dkrff03  于 2023-01-14  发布在  其他
关注(0)|答案(7)|浏览(192)

我一直在尝试从script标签写入段落,我想知道是否有一种方法可以将它们水平放置在一起,而不是放在下面。我目前的代码如下:

<p id="csvData"></p>
<p id="csvData2"></p>

我不知道如何让“csvData”和“csvData2”彼此相邻。

bbmckpt7

bbmckpt71#

这不是一个脚本的事情,这将很容易通过CSS完成。

#csvData {
  border: 1px solid red;
  height: 200px;
  float: left;
  width: 45%;
}
#csvData2 {
  border: 1px dotted blue;
  height: 400px;
  float: right;
  width: 45%;
}
<p id="csvData"></p>
<p id="csvData2"></p>
knpiaxh1

knpiaxh12#

使用CSS更改其默认行为:

p {
    display: inline;
}

p {
    display: inline-block;
}

值得一提的是,在设计你的布局时,要考虑你是否使用了正确的元素来解决你所要解决的问题。也许在你的具体情况下有另一种方法?
阅读此处:CSS display: inline vs inline-block

xiozqbni

xiozqbni3#

使用display: inline;display: inline-block;float: left;

p {
  display: inline-block;
  }
<p id="csvData">1</p>
<p id="csvData2">2</p>
b1zrtrql

b1zrtrql4#

有几个可能的答案,取决于你所说的“旁边”是什么意思。

<p id="csvData"></p>
<p id="csvData2"></p>

如果段落长度不是问题,第一个问题可能真的是“为什么你需要<p>标签?”理解block标签和inline标签之间的区别是HTML的基础。我提到这个是因为你表示你是HTML的新手。你可以通过使用<span>或其他标签来找到你需要的东西。有关blockinline元素的说明,请参见Mozilla开发者网络文档。
在我看来,从长远来看,使用不同的元素(如<span>)比从块类型修改<p>标记更可取。

<!-- Alternative, with spans instead -->
<span id="csvData"></span>
<span id="csvData2"></span>

或者,如果您必须使用CSS

#csvData, #csvData2 {
   display: inline; /* or, inline-block */
}

@Moose在a question explaining the difference between block, inline, and inline-block的不同答案中提供了一个很好的链接,值得一阅读。
如果你想要两栏布局的段落,这个问题在StackOverflow上有很多解决方案。例如,here,here和here
另一个可能的解决方案是浮点数。浮点数是通过CSS应用的,并且会导致元素向左堆叠(或右,取决于声明)。浮点数有几个复杂性。浮点数改变了元素的默认宽度,并可能导致其他与对象高度/宽度相关的复杂性。(例如,一个未设置样式的段落会自然地占用尽可能多的宽度,但浮动段落的宽度会较小。)通常,当您使用浮动时,您需要手动指定宽度,并且稍后将需要“清除”浮点数。这里有很多关于浮点数的好资源,包括herehere

/* CSS */
#csvData, #csvData2 {
   border: 1px dotted blue; /* To show the paragraphs */
   float: left;
   width: 100px;
}
xj3cbfub

xj3cbfub5#

实际上,既然您似乎希望显示表数据,为什么不将它做成一个表呢?

table {
  width: 100%; /* not necessary if 100%, but can be set narrower here */
  }
<table>
  <tr>
    <td>
      <p id="csvData">One</p>
    </td>
    <td>
      <p id="csvData2">Two</p>
    </td>
  </tr>
</table>
4smxwvx5

4smxwvx56#

p和div元素是块级元素,其中span是行内元素。
您可以将每个<p> Package 在<div>中,也可以使用<span>

jmp7cifd

jmp7cifd7#

请尝试以下操作:

<p id="csvData" style="display: inline-block; width: 50%;"></p>
<p id="csvData2" style="display: inline-block; width: 50%;"></p>

此外,你可以添加一个css条目,例如:

p#csvData, p#csvData2 {
    display: inline-block;
    width: 50%;
}

希望这对你有帮助。。干杯

相关问题