Question

我有一个基本网站，并且正在使用CSS样式化html。我将两个段落彼此相邻放置，尽管它们分别作为两个居中的部分，但它们却出现在同一行上。

例如：

<p>ugh</p>
<p>yay</p>

将显示在网站上

嗯是

代替

哦

是

我在段落中使用的CSS是：

p {
    text-align: center;
    color: black;
    display: block;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}

向所有人注意：删除内联代码并不能解决问题

完整代码CSS：https://jsfiddle.net/sprot9uh/

Answer 1

p {
  background: yellowgreen;
  text-align: center;
  color: black;
  display: block;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

.inline {
  display: inline-block;
  margin-right: 20px;
  background: yellow;
}

<p class="inline">I'm an inline block element....
</p>

<p class="inline"> me too
</p>

<p> But I'm a block level element
</p>

<p>Me too
</p>

Answer 2

为inline-block删除p

p {
  text-align: center;
  color: black;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}

Answer 3

这就是inline-block在您的CSS中所做的事情。您可以完全删除它，也可以只使用block。

Answer 4

在（p）标记中添加display:block而不是display:inline-block;，您可以删除display-inline-block，它也可以工作...

Answer 5

<p>元素默认为display: block;。通常您只需要：

p {
  margin-bottom: 10px;
  font-size: 20px;
  color: black;
}

Answer 6

p标签的默认显示属性为“阻止”，因此您可以删除显示属性。

You can refer the jsfiddle link

p {
text-align: center;
font-size: 20px;
margin-top: 0;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;

}

Answer 7

查看您的CSS代码，我认为您在<P></P>中有<section></section>段，例如：

<section>
    <p>123</p>
    <p>456</p>
</section>

您必须更改部分的css（从行到列的灵活方向）：

section {
    background: white;
    color: gray;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

为什么我的<p>段落出现在同一行？

7 个答案: