すたすた式
Blogger Vaster2
以前書いた記事、で text-align: justify; というのを知りました。
文章の均等割り付けができるそうです。
さっそく導入したところ、見事に表示が崩れました。
具体的には、codeタグ <code>~</code> で書いた部分が text-align: justify; の影響を受けているようです。
対策として、左寄せができる text-align: left; を指定しましたが、効いていないようです。
chromeの検証機能で調べたところ、<code> の下に " と <br> が挿入されていました。
浅い理解ですが、<code>タグはインライン要素というものらしく、text-align: left; は、この場合1行目の " (<br> のほうかも)にしか効かないらしいです。
なので、css に display:block; か display:inline-block; と書いて、ブロック要素にしてから、text-align: left; を書くといいようです。(text-align: center; でもいいかもしれません)
code { display: inline-block; text-align: left; }
こんな感じです。
しばらく悪戦苦闘しましたが、解決できてよかったです。
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿