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

【问题标题】：How to align blockquote open and close quotes?如何对齐块引用打开和关闭引号？
【发布时间】：2018-03-26 16:19:52
【问题描述】：

目前我们正在使用<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>

当前结果

预期结果

【问题讨论】：

标签： html css sass blockquote

【解决方案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>

【讨论】：

或者，计划 C：将引号分配给 p，例如 blockquote > :first-child::before {content: open-quote;} 和类似的最后一个孩子。编辑：哦等等，如果块引用中没有元素，那将不起作用。那就别管了。
@DaniP 经过进一步测试，文本编辑器总是添加 <p> 标记，因此使用您的解决方案使 p 内联。