我正在尝试为DIV获取水平滚动但由于某种原因我无法实现它。我已经看到其他类似的帖子已经使用overflow-x
或white-space:nowwrap
解决了,但这些都不适用于我。
This is the part of my site where I want to have a horizontal scroll
这是我的代码(我在这里添加了比所需更多的CSS,以便您可以更好地查看我的问题)。或者,您可以访问网站 here 。
.sidebar {
background-color: #ececec;
width: 3000px;
/*overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;*/
}
.wallet {
background-color: #7b67db;
background-image: linear-gradient(120deg, #7b67db 0%, #ab8afb 50%, #FFFFFF 100%);
width: 90%;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
height: 167px;
widows: 90%;
margin: 0 auto;
}
.wallet-body {
background-color: #fff;
border-radius: 0 10px 10px 0;
}
.raise {
font-size: 0.8em;
color: #b8b8b8;
padding-top: 8px;
margin-bottom: 8px;
}
.fa-arrow-up {
font-size: 0.8em;
color: #b8b8b8;
margin-top: -24px;
margin-right: 56px;
}
hr {
margin-top: 0;
margin-bottom: 14px;
}
.balance {
color: #697377;
font-size: 0.8em;
margin-bottom: -3px;
}
.amount {
color: #697377;
font-size: 1.4em;
font-weight: bold;
margin-bottom: 20px;
}
.btn-depositar {
background-color: #7b67db;
padding: 10px 70px 10px 70px;
border-radius: 50px;
color: #fff;
}
.btn-depositar:hover {
text-decoration: none;
color: #fff;
background-color: #5a50a5;
}
.currency-symbol {
vertical-align: middle;
margin-top: 40px;
margin-left: 5px;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="row scroller">
<div class="col-12 sidebar">
<!-- Pesos -->
<div class="col-4 full-wallet float-left d-inline-block">
<div class="col-12 wallet pl-0 pr-0 mt-4">
<div class="col-lg-2 d-inline-block wallet-side">
<img src="images/dollar.png" alt="símbolo pesos" class="currency-symbol">
</div>
<div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
<p class="raise">CLP$999.999.999</p>
<!--<i class="fas fa-arrow-up float-right"></i>-->
<hr>
<p class="balance">Balance</p>
<p class="amount">$999.999</p>
<a href="#" class="btn-depositar">Depositar</a>
</div>
</div>
</div>
<!-- /Pesos-->
<!-- Bitcoin -->
<div class="col-4 full-wallet float-left d-inline-block">
<div class="col-12 wallet pl-0 pr-0 mt-4">
<div class="col-lg-2 d-inline-block wallet-side">
<img src="images/bitcoin.png" alt="símbolo pesos" class="currency-symbol">
</div>
<div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
<p class="raise">CLP$999.999.999</p>
<!--<i class="fas fa-arrow-up float-right"></i>-->
<hr>
<p class="balance">Balance</p>
<p class="amount">$999.999</p>
<a href="#" class="btn-depositar">Depositar</a>
</div>
</div>
</div>
<!-- /Bitcoin-->
<!-- Ethereum-->
<div class="col-4 full-wallet float-left d-inline-block">
<div class="col-12 wallet pl-0 pr-0 mt-4">
<div class="col-lg-2 d-inline-block wallet-side">
<img src="images/ethereum.png" alt="símbolo pesos" class="currency-symbol">
</div>
<div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
<p class="raise">CLP$999.999.999</p>
<!--<i class="fas fa-arrow-up float-right"></i>-->
<hr>
<p class="balance">Balance</p>
<p class="amount">$999.999</p>
<a href="#" class="btn-depositar">Depositar</a>
</div>
</div>
</div>
<!-- /Ethereum-->
<!-- Ethereum-->
<div class="col-4 full-wallet float-left d-inline-block">
<div class="col-12 wallet pl-0 pr-0 mt-4">
<div class="col-lg-2 d-inline-block wallet-side">
<img src="images/ethereum.png" alt="símbolo pesos" class="currency-symbol">
</div>
<div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
<p class="raise">CLP$999.999.999</p>
<!--<i class="fas fa-arrow-up float-right"></i>-->
<hr>
<p class="balance">Balance</p>
<p class="amount">$999.999</p>
<a href="#" class="btn-depositar">Depositar</a>
</div>
</div>
</div>
<!-- /Ethereum-->
</div>
</div>
</body>
</html>
答案 0 :(得分:0)
我会从此.float-left
<div class="col-4 full-wallet float-left d-inline-block">
类
答案 1 :(得分:0)
.sidebar {
background-color: #ececec;
width: 3000px;
/*overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;*/
}
.wallet {
background-color: #7b67db;
background-image: linear-gradient(120deg, #7b67db 0%, #ab8afb 50%, #FFFFFF 100%);
width: 90%;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
height: 167px;
widows: 90%;
margin: 0 auto;
}
.wallet-body {
background-color: #fff;
border-radius: 0 10px 10px 0;
}
.raise {
font-size: 0.8em;
color: #b8b8b8;
padding-top: 8px;
margin-bottom: 8px;
}
.fa-arrow-up {
font-size: 0.8em;
color: #b8b8b8;
margin-top: -24px;
margin-right: 56px;
}
hr {
margin-top: 0;
margin-bottom: 14px;
}
.balance {
color: #697377;
font-size: 0.8em;
margin-bottom: -3px;
}
.amount {
color: #697377;
font-size: 1.4em;
font-weight: bold;
margin-bottom: 20px;
}
.btn-depositar {
background-color: #7b67db;
padding: 10px 70px 10px 70px;
border-radius: 50px;
color: #fff;
}
.btn-depositar:hover {
text-decoration: none;
color: #fff;
background-color: #5a50a5;
}
.currency-symbol {
vertical-align: middle;
margin-top: 40px;
margin-left: 5px;
}
.addscrollbar{
overflow-x: scroll;
display: flex;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="row scroller">
<div class="col-12 sidebar addscrollbar">
<!-- Pesos -->
<div class="col-4 full-wallet float-left d-inline-block">
<div class="col-12 wallet pl-0 pr-0 mt-4">
<div class="col-lg-2 d-inline-block wallet-side">
<img src="images/dollar.png" alt="símbolo pesos" class="currency-symbol">
</div>
<div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
<p class="raise">CLP$999.999.999</p>
<!--<i class="fas fa-arrow-up float-right"></i>-->
<hr>
<p class="balance">Balance</p>
<p class="amount">$999.999</p>
<a href="#" class="btn-depositar">Depositar</a>
</div>
</div>
</div>
<!-- /Pesos-->
<!-- Bitcoin -->
<div class="col-4 full-wallet float-left d-inline-block">
<div class="col-12 wallet pl-0 pr-0 mt-4">
<div class="col-lg-2 d-inline-block wallet-side">
<img src="images/bitcoin.png" alt="símbolo pesos" class="currency-symbol">
</div>
<div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
<p class="raise">CLP$999.999.999</p>
<!--<i class="fas fa-arrow-up float-right"></i>-->
<hr>
<p class="balance">Balance</p>
<p class="amount">$999.999</p>
<a href="#" class="btn-depositar">Depositar</a>
</div>
</div>
</div>
<!-- /Bitcoin-->
<!-- Ethereum-->
<div class="col-4 full-wallet float-left d-inline-block">
<div class="col-12 wallet pl-0 pr-0 mt-4">
<div class="col-lg-2 d-inline-block wallet-side">
<img src="images/ethereum.png" alt="símbolo pesos" class="currency-symbol">
</div>
<div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
<p class="raise">CLP$999.999.999</p>
<!--<i class="fas fa-arrow-up float-right"></i>-->
<hr>
<p class="balance">Balance</p>
<p class="amount">$999.999</p>
<a href="#" class="btn-depositar">Depositar</a>
</div>
</div>
</div>
<!-- /Ethereum-->
<!-- Ethereum-->
<div class="col-4 full-wallet float-left d-inline-block">
<div class="col-12 wallet pl-0 pr-0 mt-4">
<div class="col-lg-2 d-inline-block wallet-side">
<img src="images/ethereum.png" alt="símbolo pesos" class="currency-symbol">
</div>
<div class="col-lg-10 d-inline-block float-right wallet-body text-center mb-4 pb-4">
<p class="raise">CLP$999.999.999</p>
<!--<i class="fas fa-arrow-up float-right"></i>-->
<hr>
<p class="balance">Balance</p>
<p class="amount">$999.999</p>
<a href="#" class="btn-depositar">Depositar</a>
</div>
</div>
</div>
<!-- /Ethereum-->
</div>
</div>
</body>
</html>
您可以将属性overflow-x: scroll
设置为在内容溢出容器时启用滚动条,并使用display: flex
属性使其仅在一行中溢出。查看我已添加到您代码中的.addscrollbar
课程。