blogger : 行の途中で文字の先頭を揃える

目的：

blogger で 文字の先頭位置を揃える。

 

内容:

項目1 : 内容1 は 1行分。
項目12 : 内容12 は
2行分
項目123 : 内容123 は 1行分

の様に、行の途中で文字の開始位置を揃える。

方法：

HTMLビュー で
　display: inline-block ;
　vertical-align: top;
　width: XXem;
を設定して整形する。
width の量は プレビュー で確認しながら調整。(作成ビューと表示が異なる可能性がある)
内容等、複数行になる場合を考慮して vertical-align で top を指定。

例:

 上の「内容:」の場合、項目, :, 内容 の 3部分に分けて以下の様に記述。
　( 2020/10/29 : 3項目目の width 変更。スマホで 崩れる為 )

 <span style="display: inline-block; vertical-align: top; width: 5em;">
  項目1 </span>
<span style="display: inline-block; vertical-align: top; width: 1em;">
  : </span>
<span style="display: inline-block; vertical-align: top; width: calc( 100% - 7em);">
  内容1 は 1行分。&nbsp;</span><br/>
<span style="display: inline-block; vertical-align: top; width: 5em;">
  項目12</span>
<span style="display: inline-block; vertical-align: top; width: 1em;">
  : </span>
<span style="display: inline-block; vertical-align: top; width: calc( 100% - 7em);">
  内容12 は <br />2行分</span>
<span style="display: inline-block; vertical-align: top; width: 5em;">
  項目123 </span><br/>
<span style="display: inline-block; vertical-align: top; width: 1em;">
  : </span>
<span style="display: inline-block; vertical-align: top; width: calc( 100% - 7em);">
  内容123 は 1行分 </span><br/>