Javascript 以表格的形式水平对齐元素

我正在制作一个有滑入/滑出菜单的应用程序。显示此菜单时，我希望它以两行显示图像。因为有很多图像，我想有一个水平滚动浏览它们以及箭头

我的问题是，我无法以水平方式将这些图像排列成两行。它们一直以垂直的方式出现

当前，当我添加更多图像时，右侧的箭头会消失，当我滚动到末尾时，它会再次显示。我不知道为什么我无法在不移动其他元素的情况下获得确定的滚动区域

var步骤={}；
var stepsOpen=false；
函数onHandleClick（）{
如果（stepsOpen）{
document.getElementsByClassName（“StepMenu”）[0].setAttribute（“样式”，“顶部：-77px；”）；
document.getElementsByClassName（“句柄”）[0].setAttribute（“样式”，“顶部：102px；”）；
}否则{
document.getElementsByClassName（“StepMenu”）[0].setAttribute（“样式”，“顶部：102px；”）；
document.getElementsByClassName（“句柄”）[0].setAttribute（“样式”，“顶部：281px；”）；
}
stepsOpen=！stepsOpen；
}

正文{
保证金：0；
身高：100%；
背景：#000000；
}
html{
字体系列：“SST日语专业版”；
字体大小：62.5%；
身高：100%；
宽度：100%；
保证金：0；
填充：0；
-webkit用户选择：无；
用户选择：无；
}
.头衔{
背景：线性梯度（#000000，#2a2a）；
字号：28px；
颜色：#b9b9b9；
排名：0；
左：0；
位置：固定；
保证金：0；
宽度：100%；
高度：102px；
线高：102px；
z指数：2；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.单步菜单{
背景：#2a2a；
保证金：0；
填充：0；
位置：相对位置；
显示器：flex；
高度：179px；
宽度：100%；
顶部：-77px；
过渡：0.5s；
}
.stepContainer{
浮动：左；
排名：0；
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：行；
调整项目：基线；
}
史提尔先生{
字号：17px；
颜色：#A7A7；
宽度：200px；
左：0；
身高：50%；
保证金：0；
对齐项目：居中；
显示器：flex；
左侧填充：20px；
}
.步骤{
宽度：90%；
高度：179px；
溢出：自动；
}
.台词{
身高：89.5px；
宽度：100%；
显示：表格；
表布局：固定；
}
img{
宽度：97px；
高度：55px；
背景图像：url（'../res/image/tuna.jpg'）；
左边距：12.5px；
右边距：12.5px；
边缘底部：31px；
显示：表格单元格；
}
：-webkit滚动条{
宽度：0px；
}
.阿罗{
边框：纯白；
位置：相对位置；
填充：10px；
保证金：自动；
}
.对{
填充：0；
宽度：0；
身高：0；
边框顶部：80px实心透明；
边框底部：80px实心透明；
左边框：20px实心#9595；
右边框：0px；
}
.左{
填充：0；
宽度：0；
身高：0；
边框顶部：80px实心透明；
边框底部：80px实心透明；
右边框：20px实心#9595；
左边框：0px；
}
.处理{
宽度：87px；
顶部：102px；
保证金：自动；
边际上限：0px；
背景色：#2A2A；
位置：绝对位置；
左：0；
右：0；
高度：13px；
填充：4px；
过渡：0.5s；
显示器：flex；
}
.Htext{
字体大小：11px；
颜色：#9595；
宽度：80%；
左边距：10px；
}
哈罗先生{
位置：相对位置；
宽度：0；
身高：0；
右边距：10px；
左边框：8px实心透明；
右边框：8px实心透明；
边框顶部：8px实心#9595；
}

步
配方名称
第一部分
第二部分

我刚刚为CSS中的图像添加了float:left。这可能对你有帮助。 这是我的小提琴链接

---

我刚刚为CSS中的图像添加了float:left。这可能对你有帮助。 这是我的小提琴链接

img {
    width: 97px;
    height:55px;
    background-image: url('../res/image/tuna.jpg');
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-bottom: 31px;
    display: table-cell;
    float:left;
}