Blockquote未对齐

Question

我正在设计一个响应式网站，这意味着布局会发生变化。当被视为尽可能宽时，我的blockquote包裹到下一行。我希望它能在同一条线上。

我设法通过添加一些text-indent来修复公开引用但是我无法移动近距离报价。

我的HTML：

<blockquote><p class="blockQuote">In recent years we have noticed a growth in demand for audit services, by enterprises with foreign investment, partly because of the demands on the part of organizations such as the CPI and the central bank.</p></blockquote>

CSS：

blockquote  {
    font-family: serif;
    font-style: italic;
    color: #000;
    margin: 0px 0px 10px 0px;
}

blockquote:before   {
    content: "\201C";

}

blockquote:after    {
    content: "\201D";

blockquote:before   {
        position: absolute;
        width: 60px;
        height: 60px;
        line-height: 1;
        font-size: 120px;
    }

    blockquote:after    {
        position: absolute;
        width: 60px;
        height: 60px;
        line-height: 1;
        font-size: 120px;
    }

当我使用span元素时，关闭引用修复但是开放引用看起来应该进一步向上移动。

Answer 1

添加<span>代码而不是<p>代码。在这里工作JSFiddle https://jsfiddle.net/jfmf4ujc/