Question

我正在尝试构建一个滑块，但我正在尝试将所有li元素放在一行上。到目前为止，我有这个小提琴来展示我正在做的事情：

我的HTML：

<div class="carousel">
    <ul style="width: 654px;" class="slides">
        <li class="slide">
            <div class="img-wrapper">
                <img src="assets/img/agouti-teeth.png" alt="Agouti Teeth">
            </div>
            <div class="caption">Agouti Teeth</div>
        </li>
        <li class="slide">
            <div class="img-wrapper">
                <img src="assets/img/chipmunk-tail.png" alt="Chipmunk Tail">
            </div>
            <div class="caption">Chipmunk Tail</div>
        </li>
        <li class="slide">
            <div class="img-wrapper">
                <img src="assets/img/birds-nest.png" alt="Bird's Nest">
            </div>
            <div class="caption">Bird's Nest</div>
        </li>
        <li class="slide">
            <div class="img-wrapper">
                <img src="assets/img/agouti-teeth.png" alt="Agouti Teeth">
            </div>
            <div class="caption">Agouti Teeth</div>
        </li>
        <li class="slide">
            <div class="img-wrapper">
                <img src="assets/img/chipmunk-tail.png" alt="Chipmunk Tail">
            </div>
            <div class="caption">Chipmunk Tail</div>
        </li>
        <li class="slide">
            <div class="img-wrapper">
                <img src="assets/img/birds-nest.png" alt="Bird's Nest">
            </div>
            <div class="caption">Bird's Nest</div>
        </li>
    </ul>
</div>

我的CSS：

.carousel {
    position: relative;
    overflow: hidden;
}
.carousel .slides {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.carousel .slides .slide {
    display: inline-block;
    background-color: #F0F0F0;
    margin: 0 2px;
    width: 105px;
}
.carousel .slides .slide .caption {
    background-color: #D0D0D0;
    text-align: center;
}

每张幻灯片宽度为105像素，左侧和右侧有2像素边距。所以我做的数学是105 x 6（6张幻灯片）。这给了我630像素。使用滑动边距时，右侧和左侧总共有4个像素。所以我做了4 x 6，等于24.然后将它们加在一起。 630 + 24 = 654像素。我以为我的编程已关闭，但无论哪种方式都是如此。但是由于一些奇怪的原因，如果宽度为671像素（大于17），它将仅在一条线上。我为每张幻灯片尝试了110像素的宽度，但随后容器（遵循相同的数学运算）必须有20个额外的像素。所以它会随着时间的推移而变化，所以我不能随便为我的等式添加17个像素。

我不确定发生了什么。谢谢你的帮助！

Answer 1

显示：内联块通常会在元素之间添加大约4px（基于父级的字体大小）的额外空间

要修复你可以：

使用float：left来覆盖display：inline-block或者你需要删除显示的额外间距：inline-block通过这里的技术添加（How to remove the space between inline-block elements?）

    .carousel .slides .slide {
        float:left;
         ..
     }

或用于显示：内联块，您需要确保元素之间没有空白区域或通过CSS调整额外的4px间距（基于父字体）

    <ul><li class="slide">
     ...
    </li><li class="slide">
     ...

Answer 2

添加

float: left;

到

.carousel .slides .slide

{
}

会做的伎俩

（（我们刚刚发表评论，但由于代表不能））

即使容器宽度正确，li元素也不会在一行上

2 个答案: