Html 在相对定位元素（无flexbox）之前/之后对齐移动方向元素（上一个/下一个）

我正在处理多项目旋转木马，我需要对齐两个元素，前一个，下一个-前一个，后一个处于相对位置的容器

我需要：

• 在<>代码>项目> <代码>
中间垂直对齐 在代码>项目> <代码> 之后，在中间垂直对齐
• 对于下一步，上一步，我想在最后使用一个图标字体

使用javascript的项目将被左右移动，因此他需要相对定位

我尝试在项目上使用
display:inline block
，但没有按预期工作；
! 对于类
项目容器
，可以使用浮动代替
显示：内联块
。
我不能使用flexbox，因为我需要支持较旧的浏览器


.carousel{
宽度：500px；
溢出：隐藏；
位置：相对位置；
空白：nowrap；
}
.c-carousel___先前，
.c-下一个转盘{
显示：内联块；
}
.项目{
顶部：0px；
左：0；
位置：相对位置；
显示：内联块；
}
.物品容器{
宽度：16.66667%；
显示：内联块；
}

以前的
下一个
在
中尝试
垂直对齐：中间
。项目
溢出的容器：隐藏


正文{
保证金：0；
}
旋转木马{
宽度：500px；
溢出：隐藏；
位置：相对位置；
空白：nowrap；
}
以前的
.下一个{
显示：内联块；
}
.项目{
显示：内联块；
垂直对齐：中间对齐；
溢出：隐藏；
}
.物品容器{
宽度：16.66667%；
利润率：0.5px；
显示：内联块；
}

以前的
下一个
在
中尝试
垂直对齐：中间
。项目
溢出的容器：隐藏


正文{
保证金：0；
}
旋转木马{
宽度：500px；
溢出：隐藏；
位置：相对位置；
空白：nowrap；
}
以前的
.下一个{
显示：内联块；
}
.项目{
显示：内联块；
垂直对齐：中间对齐；
溢出：隐藏；
}
.物品容器{
宽度：16.66667%；
利润率：0.5px；
显示：内联块；
}

以前的
下一个
试试这个


.carousel{
宽度：500px；
溢出：隐藏；
位置：相对位置；
空白：nowrap；
}
以前的
.下一个{
显示：内联块；
垂直对齐：中间对齐；
宽度：25px；
}
.项目{
顶部：0px；
左：0；
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
宽度：450px；
溢出：隐藏；
}
.物品容器{
宽度：16.66667%；
显示：内联块；
}

以前的
下一个
试试这个


.carousel{
宽度：500px；
溢出：隐藏；
位置：相对位置；
空白：nowrap；
}
以前的
.下一个{
显示：内联块；
垂直对齐：中间对齐；
宽度：25px；
}
.项目{
顶部：0px；
左：0；
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
宽度：450px；
溢出：隐藏；
}
.物品容器{
宽度：16.66667%；
显示：内联块；
}

以前的
下一个
在正确的类别上使用
显示：内联块
，并为项目指定宽度

希望这能奏效：


.carousel{
宽度：500px；
溢出：隐藏；
位置：相对位置；
空白：nowrap；
}
以前的
.下一个{
显示：内联块；
宽度：50px；
垂直对齐：顶部；
}
.项目{
顶部：0px；
左：0；
位置：相对位置；
显示：内联块；
宽度：计算（500px-100px）；
溢出：隐藏；
}
.物品容器{
宽度：16.66667%；
显示：内联块；
}

以前的
下一个
在正确的类别上使用
显示：内联块
，并为项目指定宽度

希望这能奏效：


.carousel{
宽度：500px；
溢出：隐藏；
位置：相对位置；
空白：nowrap；
}
以前的
.下一个{
显示：内联块；
宽度：50px；
垂直对齐：顶部；
}
.项目{
顶部：0px；
左：0；
位置：相对位置；
显示：内联块；
宽度：计算（500px-100px）；
溢出：隐藏；
}
.物品容器{
宽度：16.66667%；
显示：内联块；
}

以前的
下一个
如果所有元素都是静态的，那么上面的答案很好，但我提到了这一点

'使用javascript的项目将左右移动，因此需要
相对定位'

“items”类的这种移动在上述所有情况下都产生了多个问题（比如“隐藏”下一个/上一个，溢出隐藏应该是可视的内容

因此，我找到了解决方案：


从旋转木马中删除溢出：隐藏
为项目添加一个新容器，项目容器，并在此容器上使用
溢出：隐藏

下一个位置，上一个
绝对位置
如果所有元素都是静态的，那么上面的答案是好的，但是我提到了