Question

我一直在试验段落并从脚本标签写入它们，并想知道是否有办法将它们水平放置在彼此旁边而不是放在下面。我目前的代码是这样的：

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

我无法弄清楚如何让“csvData”和“csvData2”相互靠近。

Answer 1

这不是一个脚本的东西，这很容易通过CSS完成。

＆＃13;

#csvData {
  border: 1px solid red;
  height: 200px;
  float: left;
  width: 45%;
}
#csvData2 {
  border: 1px dotted blue;
  height: 400px;
  float: right;
  width: 45%;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

p {
  display: inline-block;
  }

＆＃13;

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

＆＃13;

Answer 3

使用CSS更改其默认“行为”：

p {
    display: inline;
}

OR

p {
    display: inline-block;
}

在这里阅读： CSS display: inline vs inline-block

Answer 4

实际上，既然您似乎想要显示表格数据，为什么不将其作为表格呢？

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>

Answer 5

根据“旁边”的含义，有几种可能的答案。

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

如果段落长度不是问题，第一个问题可能真的是“你为什么需要个标签？”理解块标记和内联标记之间的区别是HTML的基础。我之所以提到这一点，是因为您表明您不熟悉HTML。您只需使用或其他标记即可找到所需内容。有关block和inline元素的说明，请参阅Mozilla Developer Network文档。

在我看来，从长期来看，使用其他元素（如）更适合修改块类型中的标记。

<!-- 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。

另一种可能的解决方案是花车。浮点数通过CSS应用，并使元素以最小宽度向左（或右，取决于声明）堆叠。浮子有几种并发症。 Float更改元素的默认宽度，并可能导致与对象高度/宽度相关的其他复杂情况。（例如，其他没有样式的段落尽可能多地采用宽度，但浮动段落的宽度较小。）通常在使用浮点数时，您需要手动指定宽度，并且需要“清除”漂浮物后来。这里有很多关于花车的好资源，包括here和here。

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

Answer 6

p和div元素是块级元素，其中span是内联元素。

您可以将每个打包在<div>中，也可以使用

Answer 7

请尝试以下方法：

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

希望这有助于......干杯

将两个段落放在一起？

7 个答案: