如何添加水平滚动条答案

【问题标题】：How do I add a horizontal scroll bar如何添加水平滚动条
【发布时间】：2016-08-09 01:53:32
【问题描述】：

所以我使用 Materialize 制作了带有 HTML 和 CSS 的“白卡”。这是它现在的样子：http://prntscr.com/ata21c 我的问题是：我怎样才能在那里添加“水平”滚动条，所以如果我在那里添加更多“卡片”，那么我可以水平滚动查看所有这些。

//编辑好吧，我得到了滚轮，但事实并非如此。他们仍然“堆叠”到彼此：/ http://prntscr.com/atamlf

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

【问题讨论】：

标签： html css material-design

【解决方案1】：

overflow-x 属性指定当内容在左右边缘溢出时要做什么。将其设置为自动。 white-space 属性指定如何处理元素内的空格。将其设置为 nowrap 以抑制换行符。

div {
 overflow-x: auto;
 white-space: nowrap;
}

<div>
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
</div>

【讨论】：

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