两个段落在同一行

Question

是否有可能将两个<p>放在同一条线上？我已经尝试将margin设置为0，但仍然无法正常工作。有没有人对此有答案？

谢谢！

Answer 1

这就是inline-blocks的用途。将display: inline-block和宽度小于50％分配给段落以获得所需的结果

.myclass {
  display: inline-block;
  width: 47%;
  padding: 1%;
}

<p class="myclass">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
  elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
</p>
<p class="myclass">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
  sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
  elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
</p>

Answer 2

段落<p>标记是块级元素，其中span <span>标记是内联级别元素。

如果你想使段落标记内联，你可以这样做：

p {
display:inline;
}

.spacer-text {
margin-top:15px;
margin-bottom:5px;
text-decoration:underline;
}

<div>Two paragraph tags:</div>
<div><p style="color:olivedrab;">Voilà! In view, a humble vaudevillian veteran, cast vicariously as both victim and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is a vestige of the vox populi, now vacant, vanished. </p><p style="color:rebeccapurple;">However, this valorous visitation of a by-gone vexation, stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition.</p></div>

<div class="spacer-text">A nicer approach would be two spans:</div>
<div><span style="color:firebrick;">The only verdict is vengeance; a vendetta, held as a votive, not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous.</span><span style="color:peru;">Verily, this vichyssoise of verbiage veers most verbose, so let me simply add that it's my very good honor to meet you and you may call me V</span></div>