qタグを垂直に整列する

-1

現在、CSSのqタグを垂直に整列しようとしていますが、何らかの理由で引用符も整列せず、問題が発生します。問題のqタグを垂直に整列する

q { 
    vertical-align: top; 
}

Here is an image：ここで問題のコードの関連する部分があります。私はこれが複数の部品が関わる複雑な問題であるかどうかはわかりませんが、もしそうなら、ここに私のhtmlとcssファイルがあります。

出典

2016-10-02 MegaZeroX

このページは、株式Webプログラミングの宿題ですが、明確にするために、オンラインリソースを使用しているため、これがdownvotedなっている場合、私は知らない、スタックオーバーフローのように、どこ許され、受け入れられているの両方私は学校に行きます。 – MegaZeroX

問題を再現するために、最小限のHTMLとCSSを貼り付ける必要があるので、私はdownvoteを想定しています。しかし、あなたの画像はqタグ以上を表示しています。 – Aaron

Yup - [MCVE]をチェックしてください。 Stack Overflowは、質問の質の観点から、バーをかなり高く設定します。潜在的な回答者のためにできるだけ簡単にして、より良い反応を得る可能性があります。 – Jeff

垂直整列プロパティのみに適用：

インラインレベルと 'テーブルセル' 要素

このlinkを参照してください。

ではなく、画像の上に残されたフロートを使用してみてください

q { 
    display: inline; 
    vertical-align: top; 
}

出典

2016-10-02 20:00:27 Aschab

だから、qの中のものはインラインですが、それが作成する引用符はインラインではありませんか？もしそうなら、それがなぜ機能していないのかを説明します。残念ながら、インラインで表示することは問題を解決していません。 – MegaZeroX

あなたはすでにコードを持っていますが、jsfiddleやコードペンの例を作成できますか？私はそれを簡単にフォークし、あなたがそれを理解するのを助けることができます。 – Aschab

申し訳ありません、私は[ここ]（https://jsfiddle.net/MegaZerox/8fgkc8z4/）のコピーを作成しました。画像はありませんが、重要ではありません。pタグ内の引用タグは問題があるタグなので、重要ではありません。 – MegaZeroX

を試してみてください。

img { 
 
    float: left; 
 
}

<p class="quote"> 
 
    <img src="http://placehold.it/50x50" alt="Fresh" /> 
 
    <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q> 
 
</p>

出典

2016-10-02 20:04:32 knutesten

これはうまくいきますが、私はまだ将来の使用のためにその奇妙な引用を回避する方法を見つけるのが大好きです。私はqタグ全体を垂直に整列させたいと思っています。 – MegaZeroX

qタグを垂直に整列する

答えて

関連する問題