0

こんにちは、みんな！blockquote ルールのスタイル設定に CSS のヘルプが必要です。私の望む結果は、引用されたテキストの上に引用符を置き、引用されたテキストの下に引用符を閉じることです。

この画像は、私が必要とするものを正確に示しています -サイトデザイン

これは私の現在のライブ WIP リンクです -ライブ リンク

私のCSS：

blockquote {
color: #e33e00;
font-style: italic;
font-family: GeoSlb712XBdBT;
padding:20px;
padding-left: 15px;
border-left: 3px solid #F63;


}

blockquote p:before {
content: '"';
font-size: 30px;
top:20px;
position:absolute;

}

blockquote p:after {
content: '"';
font-size: 30px;
}

誰かが助けてくれれば、とても感謝しています。

4

2 に答える 2

2

デモ

追加したコードを見てください (4 つのスペースでインデントされています)。

position: relative;に追加する必要があり、上に15 ピクセル、下に 30 ピクセルblockquote pの絶対位置:beforeを:after移動します。:before:after

右側のサイズを変更して引用符を拡大および縮小し、引用符が常に上下にあることを確認します

もちろん、20px や 35px (またはそれ以上) のように、引用符と引用符の間にスペースを追加することもできます<p>。

編集:以下のコードを追加しました。問題を修正する追加のコードは 8 スペースでインデントされています

blockquote {
    color: #e33e00;
    font-style: italic;
    font-family: GeoSlb712XBdBT;
    padding:20px;
    padding-left: 15px;
    border-left: 3px solid #F63;
}


        blockquote p { position: relative; }

blockquote p:before {
content: '"';
font-size: 30px;
position:absolute;
        top:-15px;
        left:0px;
}

blockquote p:after {
content: '"';
font-size: 30px;
        position:absolute;
        bottom:-30px;
        left:0px;
}

</p>

于 2012-08-08T17:29:34.330 に答える
0

このhttp://www.visibilityinherit.com/code/css-blockquotes-how-to.phpのように。または、他のディスプレイインラインブロックを使用してください。コードを投稿しようとしましたが、どうやら正しくインデントできません。

于 2012-12-08T20:07:48.883 に答える