labelタグの中でulタグ、liタグを利用した画像のタイル表示

前提・実現したいこと

labelタグの中でulタグ、liタグを利用した画像のタイル表示をしたいです。
タイル表示のイメージは13や33など、1行に3つの画像が重なっていくものです。
min-widthやmax-widthを使って、画像後ろの背景の幅を可変にしたいです。

以上、よろしくお願い致します。

発生している問題・エラーメッセージ

labelタグを書かない場合はうまくタイル表示ができるのですが、
labelタグを書くと、縦一列に画像が並んでしまいます。
前提として、labelタグは実装するページにおいて必須となっています。

該当のソースコード

html
1<body>
2    <label>
3        <div class="balloon">
4            <ul>
5                <li>
6                    <a href="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg" data-lightbox="abc" data-title="リビング①">
7                        <img src="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg">
8                    </a>
9                </li>
10                <li>
11                    <a href="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg" data-lightbox="abc" data-title="リビング①">
12                        <img src="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg">
13                    </a>
14                </li>
15                <li>
16                    <a href="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg" data-lightbox="abc" data-title="リビング①">
17                        <img src="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg">
18                    </a>
19                </li>
20                <li>
21                    <a href="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg" data-lightbox="abc" data-title="リビング①">
22                        <img src="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg">
23                    </a>
24                </li>
25                <li>
26                    <a href="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg" data-lightbox="abc" data-title="リビング①">
27                        <img src="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg">
28                    </a>
29                </li>
30                <li>
31                    <a href="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg" data-lightbox="abc" data-title="リビング①">
32                        <img src="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg">
33                    </a>
34                </li>
35                <li>
36                    <a href="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg" data-lightbox="abc" data-title="リビング①">
37                        <img src="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg">
38                    </a>
39                </li>
40                <li>
41                    <a href="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg" data-lightbox="abc" data-title="リビング①">
42                        <img src="https://s3-ap-northeast-1.amazonaws.com/prod-rooms/realestates/0000/0000001/0000001000/0000001000784/0000001000784229/9f3e1ca2-a316-45ba-97f3-b40502f8da38-P3.jpeg">
43                    </a>
44                </li>
45            </ul>
46        </div>
47    </label>
48</body>
49```css
50        label {
51            position: absolute;
52            white-space: nowrap;
53            text-align: center;
54            margin: 0 auto;
55            display: block;
56            min-width: 100px;
57            max-width: 400px;
58        }
59        
60        .balloon {
61            position: absolute;
62            display: inline-block;
63            margin: 1.5em 0;
64            padding: 7px 10px;
65            min-width: 100px;
66            max-width: 400px;
67            color: #555;
68            font-size: 16px;
69            background: #e0edff;
70        }
71        
72        ul {
73            padding: 7px;
74            overflow: hidden;
75            list-style: none;
76            min-width: 100px;
77            max-width: 400px;
78        }
79        
80        li {
81            float: left;
82            width: 100px;
83            padding: 3px;
84        }
85        
86        img {
87            width: 100%;
88        }
89        
90        a {
91            display: block;
92            width: 100px;
93        }
94### 試したこと
95liタグのfloat:leftでタイル表示ができることまでは理解しています。
96labelタグを書かずにページを表示すると3*3のタイル表示ができます。
97
98
99
100### 補足情報（FW/ツールのバージョンなど）
101html5　css3

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

回答2件

ベストアンサー

必ず3列表示させたいという場合は、.balloonをwidthで幅固定するというのもありますが、Flexboxレイアウトの利用をおすすめします。
昨今のグリッドレイアウトの手段はほぼすべてFlexboxで取って代わられており、floatは旧世代の遺物と化しました。
Flexboxは可変レイアウトにも割と柔軟に対応できるので検討してみてください。

こちらをご参考ください。
CSS Flexbox 各プロパティの使い方を詳しく解説 | コリス

ここからはabsoluteの挙動の解説です。

position: absoluteは適用させると、その要素は 親要素のレイアウトに影響を与えなくなります。
加えて、通常は親要素の幅いっぱいに自動的に広がるというブロック要素のレイアウトの特徴も無くなります。
ですが、明示的にサイズ指定するか、内側から押し広げれば幅は広がります。
また、直近のposition: static（デフォルト）以外が指定された親要素の幅 に依存するようになります。

ここで、labelの唯一の子要素である.balloonがabsoluteなので、前述の性質の通り親のlabelの内包レイアウトは幅ゼロになります。
また、.balloonから見て、直近のstatic以外が指定された親要素はlabelであるから、
.balloonは実質幅ゼロのレイアウトに依存することになるので、min-width:100px（あるいは画像の幅）がつっぱり棒になる形で最小幅を保つことになります。

というのが初期状態ですが、なぜlabelのabsoluteを外すと3列に並ぶようになるかというと、
.balloonの親にstatic以外が指定された要素が存在しなくなることで、代わりにページ幅に依存するようになる ので、ページの端に届くまで列の横並びによる幅の拡張ができるようになります。
この状態ではmax-width:400pxが効くようになるので最大3列まで表示されるようになります。

原理は以上ですが、試しにlabelにレイアウトが保持されるposition:relativeにしてやると、今度は.balloonがlabelの幅に依存するようになるのを確認できると思います。
（inline-blockとtext-alignのおかげで挙動がわかりずらくなってますが）

わかりずらかったらすいません。

投稿2021/09/30 03:26

編集2021/09/30 15:25

surface_0

総合スコア497

.baloonのabsolute指定をなくせば良いと思うのですが、それでは仕様に合致しませんか？

css
1.balloon {
2  /* position: absolute; */
3  display: inline-block;
4  margin: 1.5em 0;
5  padding: 7px 10px;
6  min-width: 100px;
7  max-width: 400px;
8  color: #555;
9  font-size: 16px;
10  background: #e0edff;
11}
12