inline-blockの要素を右寄せする方法
幅をwidthで最初から指定せずに、文字列の長さに応じて動的に変更したい場合は、
display:inline-block;
を追加すればいいんですが、これだと、
margin-left:auto; margin-right:0px;
のような形で右寄せすることができません。今回はその解決メモです。
解決方法は、大枠のブロックで何重か囲って、
margin-left:auto; margin-right0px;
を複数回繰り返すことです。
以下、具体的なコード。
■CSS部分
body{ margin:0; padding:0; } .frame{ width:100%; height:auto; border:solid 1px #000; } .right-justification-outer-block{ display:flex; border: solid 1px #0000FF; max-width:350px; margin-left:auto; margin-right:0px; } .right-justification-inner-block{ display:flex; flex-direction:row; align-items:center; margin-left:auto; margin-right:0px; } .text-parts{ border-radius:20px; padding:8px 12px; background-color:#ffc0cb; max-width:300px; display:inline-block; word-wrap:break-word; } .icon-parts{ margin-left:10px; } .icon-circle{ border:solid 1px #000; border-radius:50%; width:20px; height:20px; }
■HTML部分
<div class="frame"> <div class="right-justification-outer-block"> <div class="right-justification-inner-block"> <div class="text-parts"> ここにテキストが入ります </div> <div class="icon-parts"> <div class="icon-circle"></div> </div> </div> </div> </div>
ポイントは、right-justification-outer-blockのdisplay:flex;部分で、これがない場合、text-partsの幅が300pxを切っている場合、左に寄ってしまい、ある場合は、きちんと右寄せのままになります。
■参考リンク
css – ブロックレベルから文字がはみ出してしまう – memorandum-plus
CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方