単純な横並び(折り返し無し)

パターン1

inline-blockを追加

ulのletter-spacing: -0.4em;でliの左右に空く余白を文字の間隔を詰めることで打ち消しています。
liのletter-spacing: normal;で詰めた文字の間隔をリセットしています。

inline-blockを追加 (幅指定・横方向の中央揃え)

パターン2

横並びにする部分の親要素にdisplay:table、横並びの要素にdisplay:table-cell

【注意】折り返しません。

横並びにする部分の親要素にdisplay:table、横並びの要素にdisplay:table-cell

色付けしてみました

【注意】折り返しません。

パターン3

横並びにする部分の親要素にdisplay: flex

li:beforeの部分は分かり易く装飾しているだけで特には不要な部分です。