为轮播画一排内容

问题描述

使用标语JavaScript作为排除的实现工具，我需要一个能够横向滑动而不会成行绘制的容器。我对关键术语进行了多次搜索，例如单行，内联，flexBox和网格。但是，没有什么能给出一个纯粹的答案。所以，在这里，我需要一些帮助，伙计们和加尔斯。

这就是我现在所拥有的。它绘制非常离散的信息行，每一行。我可能会在这里回答自己的问题，但是我应该将#carousel-window和parentNode放在更高的位置吗？

#carousel-window {
    display: inline-table;
    overflow: hidden;
    overflow-x: hidden;
    white-space: Nowrap;
}
.carousel-grid-Box
{
    width:150px;
}

这是我的HTML：

<table style="width:100%;height:150;background-color:silver;color:black;" id="carousel-table" ajax="">
<tbody><tr><td>
    <img style="height:100%;width:100;position:relative;z-index:2" src="' + leftScrollButtonImg + '" onclick="carouselScrollLeft(this)"></td>
<td><section id="carousel-window" style="width:100%;vertical-align:super;" ajax=""></section></td>
<td><img style="height:100%;width:100;position:relative;z-index:2" src="' + rightScrollButtonImg + '" onclick="carouselScrollRight(this)">
</td></tr></tbody>
</table>

解决方法

// #carousel is the furthest point of the nest,the root node
// the table is any way you want to work it out.
#carousel,table {

    border-radius: 30px;
    width:900px;
    margin-left:auto;
    margin-right:auto;
    overflow: clip;
    overflow-x: clip;
}
// I used this as the (of most importance) display:table
#carousel-house
{
    border-radius: 30px;
    overflow: clip;
    overflow-x: clip;
    width:400px;
    display:table;
    z-index:5;
}
// These buttons don't work out right
#carousel-button-left {
    z-index: 4;
    display:none;
    position: fixed;
    left:10px;
    top:45px;
}
#carousel-button-right {
    z-index: 4;
    display:none;
    position: fixed;
    left:770px;
    top:45px;
}
// This is the Child Node of the #carousel house (table:table-row)
#carousel-window {
    overflow-wrap:break-word;
    overflow-x: scroll;
    display:table-row;
}
// here we remove any scroll bars
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
// Finally,and I did this within a Fetch
// I set the class to .carousel-cell and 
.carousel-cell {
    border-radius: 5px;
    overflow: hidden hidden;
    text-align:justify;
    height:50px;
    width:150px;
    z-index:3;
    display:table-cell;
}

如果您希望它能正常运行，可以在github.com上的wise-penny/Adoms上试用一下

inline javascript