Question

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

// EDIT 好吧，我得到了滚轮，但事情是没有。他们仍然＆＃34;堆积＆＃34;相互之间：/ 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>

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何添加水平滚动条

1 个答案: