Styling unordered lists in for each statements - php

Question

I have a ul that contains a set of lis and divs created by a for each loop, The uls and lis are there so that the lis are sortable, i.e drag and drop is enabled, the images are displaying on the next line not close to each other, please what may be the cause
This is my code
.img-w {
position: relative;
background-size: cover;
background-position: center;
cursor: pointer;
height: 150px;
width: 200px;
}
<ul class="reorder-photos-list">
#foreach ($images_ext as $image)
<div style="width: auto;height: auto">
<li id="{{$image->id}}">
<div class="img-w " id="{{$image->id}}"style="background-image: url('{{$image->filename}}')"data-src="{{$image->filename}}">
{{-- <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt="">!--}}
</div>
</li>
<span style="color: #333333;position: relative;width: 100%;text-align: justify;
display: inline;">{{$image->description}} <i class="fa fa-upload"
style="margin-left: 10px; color:#333333;"></i><br/> <br/></span>
</div>
#endforeach
</ul>

Answer 1

Div and li are block element, so naturally will display on the next line.. Unless you want to float them or change the display to inline.
try to edit your html and css code as below;
<style>
.img-box{
float: left;
}
.img-w {
position: relative;
background-size: cover;
background-position: center;
cursor: pointer;
height: 150px;
width: 200px;
}
.clearfix{
clear: both;
}
</style>
#foreach ($images_ext as $image)
<div class="img-box">
<div class="img-w" id="{{$image->id}}"style="background-image: url('{{$image->filename}}')"data-src="{{$image->filename}}">
{{-- <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt="">!--}}
</div>
<span style="color: #333333;position: relative;width: 100%;text-align: justify;
display: inline;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i></span>
</div>
#endforeach
Then use clearfix to clear the float
To include UL and Li, use the code below;
<ul>
#foreach ($images_ext as $image)
<li class="img-box">
<div class="img-w" id="{{$image->id}}"style="background-image: url('gig.png')"data-src="{{$image->filename}}">
{{-- <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt="">!--}}
</div>
<span style="color: #333333;position: relative;width: 100%;text-align: justify;
display: inline;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i></span>
</li>
#endforeach
</ul>