2

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

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

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

4

7 回答 7

4

这不是脚本，这很容易通过 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>

于 2017-01-13T20:21:47.557 回答
2

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

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

于 2017-01-13T20:21:29.337 回答
2

使用 CSS 改变它们的默认“行为”：

p {
    display: inline;
}

或者

p {
    display: inline-block;
}

在这里阅读： CSS 显示：内联与内联块

于 2017-01-13T20:23:08.447 回答
2

有几个可能的答案，具体取决于您所说的“旁边”。

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

如果段落长度不是问题，第一个问题可能真的是“为什么需要<p>标签？” 了解块标签和内联标签之间的区别是 HTML 的基础。我提到这一点是因为您表示您是 HTML 新手。您可以通过使用<span>或其他一些标签找到您需要的东西。有关块和内联元素的解释，请参阅 Mozilla 开发者网络文档。

<span>在我看来，从长远来看，使用不同的元素比修改<p>块类型的标签更可取。

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

或者，如果必须，您可以使用 CSS

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

@Moose 在解释 block 、 inline 和 inline-block 之间区别的问题的不同答案中提供了一个很好的链接。值得阅读。

如果你想要两列布局中的段落，这个问题在 StackOverflow 上有很多解决方案。例如，这里、这里和这里。

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

/* CSS */
#csvData, #csvData2 {
   border: 1px dotted blue; /* To show the paragraphs */
   float: left;
   width: 100px;
}
于 2017-01-13T20:40:56.247 回答
1

实际上，既然你似乎想显示表格数据，为什么不把它做成表格呢？

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>

于 2017-01-13T20:31:27.507 回答
0

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

您可以将每个包装<p>在 a<div>或使用<span>

于 2017-01-13T20:21:43.047 回答
0

请尝试以下方法：

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

希望这有帮助..干杯

于 2017-01-13T20:23:00.630 回答