実装したいこと
- リストを5個刻みで改行したい。
- 今は画像の借り入れだが、本来はeachforでデータを取得し必要分をリストに入れたい。
現在の状況
- 10個のliタグがある。
- それぞれはラジオボタンにlabelされている。
- liタグはflexboxにより横並びしている。
試したこと
- 5個刻みでulタグを生成していたが、foreachでデータベースにある分だけ、
リストを作る際に、自動で改行を入れれるようにしたいため一旦ボツとした。
php.laravel初学者になります。
至らない点等ございましたら、コメントで指摘していただけると幸いです。
よろしくお願いいたします。
<div class='select_seed'>
<div class='seed_header'>
<img src="{{ asset('/assets/images/size-large.png') }}" alt='size-icon' class=size_icon ><h1>犬を選ぶ</h1>
</div>
<ul>
<li>
<div class="pad">
<input id="test46" name="seed" type="radio" class="selectbox " value="46" checked="" required="">
<label class="selectlabel coolrdio" for="test46"><img class='photo' src="{{ asset('/assets/images/1irish-wolfhound-.jpg') }}" alt='アイリッシュウルフハウンド'>アイリッシュウルフハウンド</label>
</div>
</li>
<li>
<div class="pad">
<input id="test47" name="seed" type="radio" class="selectbox" value="47" required="">
<label class="selectlabel coolrdio" for="test47"><img class='photo' src="{{ asset('/assets/images/2irish-setter.jpg') }}" alt='アイリッシュセッター'>アイリッシュセッター</label>
</div>
</li>
<li>
<div class="pad">
<input id="test48" name="seed" type="radio" class="selectbox" value="48" required="">
<label class="selectlabel coolrdio" for="test48"><img class='photo' src="{{ asset('/assets/images/4Afghan hound.jpg') }}" alt='アフガンハウンド'>アフガンハウンド</label>
</div>
</li>
<li>
<div class="pad">
<input id="test49" name="seed" type="radio" class="selectbox" value="49" required="">
<label class="selectlabel coolrdio" for="test49"><img class='photo' src="{{ asset('/assets/images/5alaskan-malamute.jpg') }}" alt='アラスカンマラミュート'>アラスカンマラミュート</label>
</div>
</li>
<li>
<div class="pad">
<input id="test50" name="seed" type="radio" class="selectbox " value="50" required="">
<label class="selectlabel coolrdio" for="test50"><img class='photo' src="{{ asset('/assets/images/7pointer.jpg') }}" alt='イングリッシュポインター'>イングリッシュポインター</label>
</div>
</li>
<li>
<div class="pad">
<input id="test51" name="seed" type="radio" class="selectbox " value="51" required="">
<label class="selectlabel coolrdio" for="test51"><img class='photo' src="{{ asset('/assets/images/8old-sheepdog.jpg') }}" alt='オールドイングリッシュシープドッグ'>オールドイングリッシュシープドッグ</label>
</div>
</li>
<li>
<div class="pad">
<input id="test52" name="seed" type="radio" class="selectbox " value="52" required="">
<label class="selectlabel coolrdio" for="test52"><img class='photo' src="{{ asset('/assets/images/9Curly retriever.jpg') }}" alt='カーリーコーテッドレトリバー<'>カーリーコーテッドレトリバー</label>
</div>
</li>
<li>
<div class="pad">
<input id="test53" name="seed" type="radio" class="selectbox " value="53" required="">
<label class="selectlabel coolrdio" for="test53"><img class='photo' src="{{ asset('/assets/images/10great-dane.jpg') }}" alt='グレーデン'>グレーデン</label>
</div>
</li>
<li>
<div class="pad">
<input id="test54" name="seed" type="radio" class="selectbox " value="54" required="">
<label class="selectlabel coolrdio" for="test54"><img class='photo' src="{{ asset('/assets/images/11great-p.jpg') }}" alt='グレートピレニーズ'>グレートピレニーズ</label>
</div>
</li>
<li>
<div class="pad">
<input id="test55" name="seed" type="radio" class="selectbox " value="55" required="">
<label class="selectlabel coolrdio" for="test55"><img class='photo' src="{{ asset('/assets/images/13gorlden.jpg') }}" alt='ゴールデンレトリバー<'>ゴールデンレトリバー</label>
</div>
</li>
</ul>
</div>