どうも7noteです。文字を等間隔にしたり、文章の右端を揃える方法です。

予め述べておきますと、タイトルのような事はできますが、

「デザインを見直した方がいい」

と思います。理由は3つ。

ブラウザによって今回使うcssが対応していない（異なる指定方法が必要な場合も）
1行の文字量が変わる事で、対応できずデザインが崩れる場合がある
あのgoogleですら使っていない （検索結果画面の話）

「それでもどうしてもやりたいんだ～！」

という方だけ、続きをお読みください。

方法

文字を等間隔にするプロパティとして今回使うのはtext-align-last: justify;を使います。
ただChromeやFirefoxにしか効かないので、IEやEdgeに対応させるためにはtext-justify: inter-ideograph;も指定が必要です。

ブラウザ	プロパティ
Chrome・Firefox	text-align-last: justify;
IE・Edge	text-justify: inter-ideograph;
safari	不可

safariでは専用のcssプロパティは存在しません。
（※後ほどsafariでもできる方法も記述します。）

書き方

index.html

<ul>
  <li>もも</li>
  <li>りんご</li>
  <li>さくらんぼ</li>
  <li>パイナップル</li>
</ul>

style.css

li {
  text-align-last: justify;       /* Chrome・Firefox用 */
  text-justify: inter-ideograph;  /* IE・Edge用 */
}

Safariにも対応させる書き方

index.html

<ul>
  <li><span>も</span><span>も</span></li>
  <li><span>り</span><span>ん</span><span>ご</span></li>
  <li><span>さ</span><span>く</span><span>ら</span><span>ん</span><span>ぼ</span></li>
  <li><span>パ</span><span>イ</span><span>ナ</span><span>ッ</span><span>プ</span><span>ル</span></li>
</ul>

style.css

li {
  display: flex;
  justify-content: space-between;
}

一応出来ますが、見ての通りソースが汚いのであまりオススメはしません。
文字をあとで変更することになったら大変ですね。悲惨です。

数文字程度ならもうスペースでもいいのでは。。。

<ul>
  <li>年　　齢</li>
  <li>住　　所</li>
  <li>生年月日</li>
</ul>

まぁ、3文字や4文字が同時にあると無理になるが。。

注意点

cssを指定する際はブロック要素に指定
効いたり効かなかったリする事がある（＝不安定）
iphoneユーザーが多いご時世でsafari非対応

まとめ

紙媒体のデザインをやっていたり、WEBにあまり詳しくない方から文字を左右均等になるようにしてください！というのはよく頼まれます。
ですが、きっぱり「WEBではできません！」と、今は断ってもいいと思います。
それでも納得してもらえない時は「あのgoogleでもやってませんよ！」という根拠のようで根拠になっていない理由で押し通してください。
いつか他のブラウザでもtext-align-last: justify;が使えるようになるのを待ちましょう。