テキストを等間隔に配置
例えばコロンで要素を区切り、コロンまでの長さを揃えたい場合のCSSです。
tableタグを使えばすぐにできますが、tableタグを使わずにリスト形式の
見出し：値
という表現をする場合の、コロンまでの長さを均等に配置するCSSです。
tableタグを使わずにテキストを等間隔に配置するCSS
CSS
.list p{
background: #f9f6f3;
padding: 10px;
}
.list .col {
display: inline-block;
width: 120px;
line-height: 19px;
}
HTML
<div class="list">
<p>
<span class="col">熱量</span>：347kcal<br>
<span class="col">たんぱく質</span>：10.8g<br>
<span class="col">脂質</span>：5.9g<br>
<span class="col">炭水化物</span>：27.6g<br>
<span class="col">食塩相当量</span>：11.2g
</p>
</div>
コロンまでの長さを .col でスタイルを定義し、コロンの前の要素を .colで定義します。