ons-list Thumbnails and titlesの下に文字を入れたい

https://ja.onsen.io/v2/api/js/ons-list-item.html
上記のサイトにあるThumbnails and titles　というテンプレートを使用しているのですが、その下の項目に文字やアイコンを表示させたいのですが表示されません。

<ons-list>
<ons-list-header>Thumbnails and titles</ons-list-header>
    <ons-list-item>
      <div class="left">
        <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40">
      </div>
      <div class="center">
        <span class="list-item__title">Cutest kitty</span><span class="list-item__subtitle">On the Internet</span>
      </div>
    </ons-list-item>
</ons-list>

↓

<ons-list>
<ons-list-header>Thumbnails and titles</ons-list-header>
    <ons-list-item>
      <div class="left">
        <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40">
      </div>
      <div class="center">
        <span class="list-item__title">Cutest kitty</span><span class="list-item__subtitle">On the Internet</span>
      </div>
　　　<p> test test test </p>
    </ons-list-item>
<ons-list>

test test testが表示されません。イメージとしては

青い線内に一つのons-list-itemとしてテキスト、アイコンを入れたいのですが、改善策はありますでしょうか？
ご回答よろしくお願いします。

test-text 2020/3/31というテキストをサムネイル画像、タイトルの下に追加をしたいです。

行動規範の内容に同意します

回答2件

ベストアンサー

簡単な方法として、サムネイルとタイトルの下にメッセージ分の余白を設け、position: absolute;でメッセージを表示します。
この場合のメッセージは、<div class="center"></div>の中に記述します。

HTML
1<ons-list>
2  <ons-list-header>Thumbnails and titles</ons-list-header>
3  <ons-list-item class="list-item-thumbnail">
4    <div class="left">
5      <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40">
6    </div>
7    <div class="center">
8      <span class="list-item__title">Cutest kitty</span>
9      <span class="list-item__subtitle">On the Internet</span>
10      <div class="message">test test test test test</div>
11    </div>
12  </ons-list-item>
13</ons-list>

CSS
1.list-item-thumbnail {
2  position: relative;
3}
4.list-item-thumbnail .list-item__center,
5.list-item-thumbnail .list-item--material__center,
6.list-item-thumbnail .list-item__left,
7.list-item-thumbnail .list-item--material__left {
8  padding-bottom: 36px;
9}
10.list-item-thumbnail .message {
11  position: absolute;
12  left: 16px;
13  bottom: 12px;
14}

投稿2020/03/31 14:55

otak-lab

総合スコア276

todayyy

2020/03/31 20:57

イメージ通りできました！ありがとうございます！

行動規範の内容に同意します

具体的な表現が分からないですが、こんな感じでしょうか？

html
1<ons-page>
2  <ons-list-header>Thumbnails and titles</ons-list-header>
3    <ons-list-item modifier="nodivider">
4      <div class="left">
5        <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40">
6      </div>
7      <div class="center">
8        <span class="list-item__title">Cutest kitty</span>
9        <ons-list-item modifier="nodivider">
10          下に追加
11        </ons-list-item>
12      </div>
13    </ons-list-item>
14    <ons-list-item>
15      <div class="left">
16        <img class="list-item__thumbnail" src="http://placehold.jp/0/EFEFF4/EFEFF4/40x40.png">
17      </div>
18      <div class="center">行の下に追加</div>
19    </ons-list-item>
20</ons-page>