相对于父容器定位元素

Question

我有一个看起来像这样的幻灯片：

<div class="slideshow_cont">
    <div class="slideshow_btn_cont">
    </div>
    <ul class="slideshow">  
    {% for obj in project_list %}
    <li class="slide"> 
    <img class="slideshow_thumb"/>
    <span class="slideshow_thumb_label">
    {{ obj.project_title }}
    </span>
    </li>
    {% endfor %}
    </ul>
</div>

---

.slideshow_cont{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.slideshow{
    height:150px;
    width:2000px;
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    list-style:none;
}
.slide{
    width: 140px;
    height: 120px;
    position: relative;
    margin: 0 40;
}

如何添加保证金

在第一张幻灯片和slideshow_cont的左边框之间和

在最后一张幻灯片和slideshow_cont的右边框之间，

使幻灯片不与按钮重叠？

---

谢谢

Answer 1

您可以使用:first-child和:last-child伪类来添加边距

或者在容器上使用填充

Answer 2

解决了

我添加了这个函数来设置幻灯片宽度等于幻灯片宽度 x 幻灯片 n + 边距：

$(document).ready(function(){
    var slide_ = $('.slide');
    var slide_w =  slide_.width();
    var slide_n = slide_.length;
    var slide_m = slide_n * 80; // margin
    slideshow_width = slide_n * slide_w + slide_m;
    $('.slideshow').css({'width':slideshow_width});
});

结果：