我一直在尝试从script标签写入段落,我想知道是否有一种方法可以将它们水平放置在一起,而不是放在下面。我目前的代码如下:
<p id="csvData"></p> <p id="csvData2"></p>
我不知道如何让“csvData”和“csvData2”彼此相邻。
bbmckpt71#
这不是一个脚本的事情,这将很容易通过CSS完成。
#csvData { border: 1px solid red; height: 200px; float: left; width: 45%; } #csvData2 { border: 1px dotted blue; height: 400px; float: right; width: 45%; }
knpiaxh12#
使用CSS更改其默认行为:
p { display: inline; }
或
p { display: inline-block; }
值得一提的是,在设计你的布局时,要考虑你是否使用了正确的元素来解决你所要解决的问题。也许在你的具体情况下有另一种方法?阅读此处:CSS display: inline vs inline-block
xiozqbni3#
使用display: inline;、display: inline-block;或float: left;
display: inline;
display: inline-block;
float: left;
<p id="csvData">1</p> <p id="csvData2">2</p>
b1zrtrql4#
有几个可能的答案,取决于你所说的“旁边”是什么意思。
如果段落长度不是问题,第一个问题可能真的是“为什么你需要<p>标签?”理解block标签和inline标签之间的区别是HTML的基础。我提到这个是因为你表示你是HTML的新手。你可以通过使用<span>或其他标签来找到你需要的东西。有关block和inline元素的说明,请参见Mozilla开发者网络文档。在我看来,从长远来看,使用不同的元素(如<span>)比从块类型修改<p>标记更可取。
<p>
<span>
<!-- 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应用的,并且会导致元素向左堆叠(或右,取决于声明)。浮点数有几个复杂性。浮点数改变了元素的默认宽度,并可能导致其他与对象高度/宽度相关的复杂性。(例如,一个未设置样式的段落会自然地占用尽可能多的宽度,但浮动段落的宽度会较小。)通常,当您使用浮动时,您需要手动指定宽度,并且稍后将需要“清除”浮点数。这里有很多关于浮点数的好资源,包括here和here。
/* CSS */ #csvData, #csvData2 { border: 1px dotted blue; /* To show the paragraphs */ float: left; width: 100px; }
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>
4smxwvx56#
p和div元素是块级元素,其中span是行内元素。您可以将每个<p> Package 在<div>中,也可以使用<span>
<div>
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%; }
希望这对你有帮助。。干杯
7条答案
按热度按时间bbmckpt71#
这不是一个脚本的事情,这将很容易通过CSS完成。
knpiaxh12#
使用CSS更改其默认行为:
或
值得一提的是,在设计你的布局时,要考虑你是否使用了正确的元素来解决你所要解决的问题。也许在你的具体情况下有另一种方法?
阅读此处:CSS display: inline vs inline-block
xiozqbni3#
使用
display: inline;
、display: inline-block;
或float: left;
b1zrtrql4#
有几个可能的答案,取决于你所说的“旁边”是什么意思。
如果段落长度不是问题,第一个问题可能真的是“为什么你需要
<p>
标签?”理解block标签和inline标签之间的区别是HTML的基础。我提到这个是因为你表示你是HTML的新手。你可以通过使用<span>
或其他标签来找到你需要的东西。有关block和inline元素的说明,请参见Mozilla开发者网络文档。在我看来,从长远来看,使用不同的元素(如
<span>
)比从块类型修改<p>
标记更可取。或者,如果您必须使用CSS
@Moose在a question explaining the difference between block, inline, and inline-block的不同答案中提供了一个很好的链接,值得一阅读。
如果你想要两栏布局的段落,这个问题在StackOverflow上有很多解决方案。例如,here,here和here。
另一个可能的解决方案是浮点数。浮点数是通过CSS应用的,并且会导致元素向左堆叠(或右,取决于声明)。浮点数有几个复杂性。浮点数改变了元素的默认宽度,并可能导致其他与对象高度/宽度相关的复杂性。(例如,一个未设置样式的段落会自然地占用尽可能多的宽度,但浮动段落的宽度会较小。)通常,当您使用浮动时,您需要手动指定宽度,并且稍后将需要“清除”浮点数。这里有很多关于浮点数的好资源,包括here和here。
xj3cbfub5#
实际上,既然您似乎希望显示表数据,为什么不将它做成一个表呢?
4smxwvx56#
p和div元素是块级元素,其中span是行内元素。
您可以将每个
<p>
Package 在<div>
中,也可以使用<span>
jmp7cifd7#
请尝试以下操作:
此外,你可以添加一个css条目,例如:
希望这对你有帮助。。干杯