実現したいこと
- <div class="smple">全体中央寄せ
- <p>文字左寄せ
- <span>改行をinline-blockでやりたいです
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
html
<div class="sample"> <p> ※左寄せ文〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜、 <span>画面幅によってここから切り替えしたい。</span> </p> <p> ※左寄せ文〜〜〜〜〜〜〜。 ※左寄せ文〜〜〜〜〜〜〜〜〜〜〜〜、 <span>ここ切り替えしたい</span>〜〜。 </p> <div>
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
css
.sample { width:100% text-align: center; margin: 0 auto; padding: 0 10px; } .sample p { display: inline-block; text-align: left; } .sample p span{ display: inline-block; }
この段階で、pにinline-blockを使っているから
spanでさらにinline-blockを使うからうまくいかないのでしょうか?
現在、左寄せにしかなってない状況です。
これを叶えるやり方があれば教えていただきたいです!
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
<br>使いたくない理由:画面サイズによって変な改行が引き起こされる
(例)
文〜〜〜〜〜〜〜〜〜
〜、
<br> <span>※の文</span>
0 コメント