文字数分の可変インデントをつけるには？

Question

###前提・実現したいこと

この画像のように、青文字分のインデントを下の行に付けたいです。

###発生している問題
インデントが固定幅の場合は色々な方法が可能ですが、
文字数分で可変させる場合、CSSのみでできるのか、どのように書いたら良いか解決策が見つかりません。
JSはあまり詳しくなく、どのように制御したら良いかわかりません。

###試したソースコード
HTMLはなるべく<li>を使用したいです。

<div style="display:flex">
    <span style="flex:0 1 5em;">フルーツ：</span>
    <ul style="flex:1 1 auto; display:inline;">
       <li>りんご</li>
       <li>みかん</li>
       <li>グレープフルーツ</li>
    </ul>
</div>

<div style="display:flex">
    <span style="flex:0 1 15em;">動物：</span>
    <span style="flex:1 1 auto;">猫とか犬</span>
    <span style="flex:1 1 auto;">ペンギン</span>
    <span style="flex:1 1 auto;">イルカ</span>
</div>

<div style="display:flex">
    <span style="flex:0 1 15em;">映画のジャンル：</span>
    <span style="flex:1 1 auto;">アクション</span>
    <span style="flex:1 1 auto;">ホラー</span>
</div>

回答お待ちしています。

Answer 1

提示されたコード

<div style="display:flex">
    <span style="flex:0 1 5em;">フルーツ：</span>
    <ul style="flex:1 1 auto; display:inline;">
       <li>りんご</li>
       <li>みかん</li>
       <li>グレープフルーツ</li>
    </ul>
</div>

で出来ている気がしますが、display: flex;を使用せずにfloatのみでも簡単にできます。

<dl>
	<dd>フルーツ：</dd>
	<dd>
		<ul>
			<li>りんご</li>
			<li>みかん</li>
			<li>グレープフルーツ</li>
		</ul>
	</dd>
</dl>
<!-- 以下同様 -->

dl {
	overflow: hidden;
}

dd,dt {
	float: left;
}

---

【追記】

<span style="flex:0 1 5em;">フルーツ：</span>

のstyleを削除すればこのままのコードで実装できます。

Comments

[sascha]

早速の回答ありがとうございます！

「フルーツ：」と、「りんご」が同じ行になるようにしたいです。
自分で試した限りでは、<li>を使うと「りんご」以下が改行されてしまいます。。

[退会済みユーザー]

ul,li要素にmargin: 0; padding: 0;を追記してみてください。

[退会済みユーザー]

サンプルです。
https://jsfiddle.net/vbs4rs0b/1/

[sascha]

ご丁寧にありがとうございます！
できました！