ナビゲーションメニューを縦書きで実装する際、上揃えのために指定したCSS

縦書きの実装の際に、CSSで「writing-mode: vertical-rl;」とすることは以前のブログ記事でも書きました。

指定した後、メニューのうち文字数が比較的少ないものはインデントが出来てしまいました。

出来ればこれを上揃えにして見た目を整えたい時にしたことです。

調べましたが、すぐに見つけることが出来ず時間がかかってしまいましたので備忘録として残しておきます。

【結論】

上揃えしたいアイテムに直接

text-align: left;

と指定することで実現できました。

具体的には

【HTML】

<ul>メニューリスト
  <li></li>メニューアイテム
  <li></li>メニューアイテム
  <li></li>メニューアイテム
</ul>

【CSS】

li {
  text-align: left;
}

としました。