为每个语句设置无序列表的样式

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}}">
            {{-- <a href=""> <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt=""></a>!--}}
         </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}}">
            {{-- <a href=""> <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt=""></a>!--}}
        </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}}">
                {{-- <a href=""> <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt=""></a>!--}}
            </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>