html - 带水平滚动的 DIV

问题描述

我正在尝试为 DIV 获得水平滚动，但由于某种原因我无法实现它。我已经看到其他类似的帖子已经通过使用解决了，overflow-x但white-space:nowwrap这些都不适用于我。

这是我的代码（我在这里添加了比所需更多的 CSS，以便您可以更好地看到我的问题）。或者您可以在此处访问该站点。

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

标签： htmlcssbootstrap-4

html - 带水平滚动的 DIV - Bootstrap 4

问题描述

解决方案

推荐阅读