2

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

当前结果 目前的问题

预期成绩 期望的输出

4

1 回答 1

3

这是因为您将内容放在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>

于 2018-03-26T16:24:01.397 回答