Html 如何添加水平滚动条

所以我用Materialize用HTML和CSS制作了“白卡”。下面是它现在的样子：我的问题是：我如何才能在那里添加“水平”滚动条，所以如果我在那里添加更多的“卡片”，那么我就可以水平滚动查看所有这些

//编辑 好吧，我得到了滚轮，但问题是没有。它们仍然“堆叠”在一起：/

密钥存储


隋没有行头
隋没有行头
隋没有行头
隋没有行头
隋没有行头
隋没有行头

当内容在左右边缘溢出时，

overflow-x

属性指定要执行的操作。将其设置为自动。

空白

属性指定如何处理元素内的空白。将其设置为nowrap以抑制换行

div{
溢出-x：自动；
空白：nowrap；
}

---

谢谢，但我想我做错了什么。我将编辑我的第一篇文章。

                                <div class="keystore-content">
                                <span class="keystore-title valign-wrapper">Key Store</span>
                                <br>
                                    <div class="container center"style="overflow-x: scroll;overflow-y: hidden;display:inline-block">
                                        <div id="mainthing">
                                        <div id="case1" style='padding:1%;font-weight:bold;font-size:16px'> <div class='card item-card2 waves-effect waves-light' style='margin:0%;width:220px' id=''> <div class='iteam' style='text-decoration: underline;text-align: left'>Sui Has No Swag</div> <img title="Key" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOiejrL1Zi0aaRd25E6IXgktTYxKWtZOKHzztSuJ11ibqQoYqi3FDg80c4NnezetGrA31LSA/200fx200'></div></div>
                                        <div id="case2" style='padding:1%;font-weight:bold;font-size:16px'> <div class='card item-card2 waves-effect waves-light' style='margin:0%;width:220px' id=''> <div class='iteam' style='text-decoration: underline;text-align: left'>Sui Has No Swag</div> <img title="Key" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOiejrL1Zi0aaRd25E6IXgktTYxKWtZOKHzztSuJ11ibqQoYqi3FDg80c4NnezetGrA31LSA/200fx200'></div></div>
                                        <div id="case2" style='padding:1%;font-weight:bold;font-size:16px'> <div class='card item-card2 waves-effect waves-light' style='margin:0%;width:220px' id=''> <div class='iteam' style='text-decoration: underline;text-align: left'>Sui Has No Swag</div> <img title="Key" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOiejrL1Zi0aaRd25E6IXgktTYxKWtZOKHzztSuJ11ibqQoYqi3FDg80c4NnezetGrA31LSA/200fx200'></div></div>
                                        <div id="case2" style='padding:1%;font-weight:bold;font-size:16px'> <div class='card item-card2 waves-effect waves-light' style='margin:0%;width:220px' id=''> <div class='iteam' style='text-decoration: underline;text-align: left'>Sui Has No Swag</div> <img title="Key" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOiejrL1Zi0aaRd25E6IXgktTYxKWtZOKHzztSuJ11ibqQoYqi3FDg80c4NnezetGrA31LSA/200fx200'></div></div>
                                        <div id="case2" style='padding:1%;font-weight:bold;font-size:16px'> <div class='card item-card2 waves-effect waves-light' style='margin:0%;width:220px' id=''> <div class='iteam' style='text-decoration: underline;text-align: left'>Sui Has No Swag</div> <img title="Key" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOiejrL1Zi0aaRd25E6IXgktTYxKWtZOKHzztSuJ11ibqQoYqi3FDg80c4NnezetGrA31LSA/200fx200'></div></div>
                                        <div id="case2" style='padding:1%;font-weight:bold;font-size:16px'> <div class='card item-card2 waves-effect waves-light' style='margin:0%;width:220px' id=''> <div class='iteam' style='text-decoration: underline;text-align: left'>Sui Has No Swag</div> <img title="Key" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOiejrL1Zi0aaRd25E6IXgktTYxKWtZOKHzztSuJ11ibqQoYqi3FDg80c4NnezetGrA31LSA/200fx200'></div></div>
                                        </div>
                                    </div>
                                </div>