相對於父容器定位元素

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});
});

結果：