dongsuo9982
2018-06-11 16:32
浏览 72
已采纳

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

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • donglianer5064 2018-06-11 16:41
    已采纳

    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>
    
    点赞 打赏 评论

相关推荐 更多相似问题