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

Question

我正在尝试构建一个滑块，但我正在尝试将所有 li 元素都放在一行中。到目前为止，我有这个 fiddle 来展示我在做什么：

我的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

display:inline-block 通常在元素

之间添加大约 4px（基于父字体大小）的额外 space

要修复您可以：

使用 float:left 覆盖 display:inline-block，否则您将需要删除 display:inline-block 通过此处的技术添加的额外间距 (How to remove the space between inline-block elements?)

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

或 display:inline-block 你需要确保你的元素之间没有白色 space 或通过 CSS[ 调整额外的 4px 间距（基于父字体）

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

Answer 2

添加

float: left;

至

.carousel .slides .slide

{
}

会成功的

((本来可以发表评论但由于代表的原因不能))

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

li elements won't go on one line even with correct container width

html

css

width

margins