在div中对齐<p> </p>

Question

我有以下div和段落：

<div id="container">
                <p class="jsavoutput jsavscroll" readonly="readonly" style="width:225px; height:400px"> </p>
                <p id="title" style="text-align: center; verticle-align:text-top" > Title </p>
</div>​

在jsfiddle上运行此功能，您可以看到底部显示“标题”，除非删除了第一个<p>。这是为什么？如何将第一段与第二段对齐到顶部中间？

Answer 1

正如Andrei Drynov所述，因为<p>是一个块元素，它出现在第一个元素下面。

要将第二段与第一段放在一起，您可以将display: inline-block添加到<p>个元素中。

演示：http://jsfiddle.net/AKaHN/

Answer 2

因为您为第一个<p>标记提供了400px的高度。标题并没有真正出现在底部，它只是出现在第一个标签下方，垂直占据400px。

如果您希望它们彼此相邻，则可以将<p>标记更改为<span>，或者为<p>标记提供内联样式（或内联块） ）：<p style="display: inline">Something here</p>

<div id="container" style="text-align: center;">
     <span class="jsavoutput jsavscroll" readonly="readonly" style="width:225px; height:400px"> Test </span>
     <span id="title" style="text-align: center;"> Title </span>
</div>​​​​​​​​​​​​​​​​​​​​​​​

OR

<div id="container">
     <p class="jsavoutput jsavscroll" readonly="readonly" style="width:225px; height:400px"> Test </p>
     <p id="title" style="text-align: center; margin-top: -400px;"> Title </p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

您可以调整margin-top值来向上或向下移动第二段，具体取决于您想要的位置。

Answer 3

<p>是一个块元素，所以第二段很自然。将background-color添加到两者中以查看它们。

你想要他们并排吗？然后使用float:left