※ 2019年現在では Flexbox があるのでもうこのような実装をすることは無い

このようなリストを横並びにしたい場合

<ul>
    <li>hoge</li>
    <li>piyo</li>
    <li>fuga</li>
</ul>

このように inline-block 指定にすることが多い。

li{
    display: inline-block;
}

ここに問題が一つあって、こうしてしまうと list-style-type で指定するマークが外れてしまうのだ。

なのでそれを補うようにマークを押し込めばよい

li{
    display: inline-block;
}
li:before{
    content: "\25cb  ";
    font-size: 6px;
    vertical-align: middle;
}

こんな感じになる。25cb というのは Unicode で丸印を表していて、それを挿入している。font-size は対象の半分ぐらいのサイズにするのがちょうどよい感じになる。

では ol タグ等の順序付きリストの連番の場合はどうするかというと

li{
    display: inline-block;
    counter-increment: aaaa;
}
li:before{
    content: counter(aaaa) ".  ";
}

このよに CSS でカウンタを書いてやればよい。

ローマ数字にしたい場合は、このように指定すればよい(この値はイロイロ設定できる)

li:before{
    content: counter(aaaa, lower-roman) ".  ";
}

この数値の表示タイプは CSS の list-style-type と同様のモノである。 https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type