如何对齐块引号打开和关闭引号？

Question

目前，我们使用<blockquote>添加开始和结束引号到字符串通过CSS，因为我们需要自定义样式。然而，它们并不是与开始前的开场白对齐和文本末尾的结尾引文相一致。

我们怎么才能修好这条线？

​

blockquote {
  font-style: italic;
  border: none;
  quotes: "\201C" "\201D" "\2018" "\2019";
  display: block;
}

blockquote:before {
  content: open-quote;
  font-weight: bold;
  color: red;
}

blockquote:after {
  content: close-quote;
  font-weight: bold;
  color: red;
}

<blockquote>
  <p>Competently conceptualize clicks-and-mortar customer service without front-end opportunities. Interactively morph visionary intellectual capital without mission-critical manufactured products. Dramatically grow extensible portals vis-a-vis.</p>
</blockquote>

​

当前结果

预期结果

​

Answer 1

这是因为您的内容在p标记中，而这不是内联元素，默认情况下是块。因此，要么删除该标记，要么将其样式设置为内联。

移除标记

​

blockquote {
  font-style: italic;
  border: none;
  quotes: "\201C" "\201D" "\2018" "\2019";
  display: block;
  text-align:center;
}

blockquote:before {
  content: open-quote;
  font-weight: bold;
  color: red;
}

blockquote:after {
  content: close-quote;
  font-weight: bold;
  color: red;
}

<blockquote>
  Competently conceptualize clicks-and-mortar customer service without front-end opportunities. Interactively morph visionary intellectual capital without mission-critical manufactured products. Dramatically grow extensible portals vis-a-vis.
</blockquote>

​

样式p到内联

​

blockquote {
  font-style: italic;
  border: none;
  quotes: "\201C" "\201D" "\2018" "\2019";
  display: block;
  text-align: center;
}

blockquote:before {
  content: open-quote;
  font-weight: bold;
  color: red;
}

blockquote:after {
  content: close-quote;
  font-weight: bold;
  color: red;
}

blockquote p {
  display: inline;
}

<blockquote>
  <p>Competently conceptualize clicks-and-mortar customer service without front-end opportunities. Interactively morph visionary intellectual capital without mission-critical manufactured products. Dramatically grow extensible portals vis-a-vis.</p>
</blockquote>

​