Ada beberapa elemen yang berasal dari array, maka saya membutuhkannya untuk ditempatkan dalam daftar dengan diplay flex, masalah saya adalah saya menambahkan tombol yang harus menutup yang dipilih tetapi yang lain juga mengubah ketinggiannya ...

Telah mencoba dengan tampilan yang berbeda dan menempatkan inline pada elemen li tetapi tidak ada yang berhasil.

Adakah cara untuk memiliki elemen dalam daftar inline dan independen tinggi?

.dragscroll {
  display: flex;
  overflow-x: auto;
}

.rectangle-holder {
  border: 1px solid black;
}

ul {
  list-style-type: none;
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid p-0">
    <div class="row">
      <div class="col-12">
        <ul class="dragscroll">
          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment1" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment1">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>

          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment2" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment2">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>

          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment3" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment3">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>
          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment4" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment4">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>

          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment5" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment5">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>

          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment6" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment6">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>

          <li class="rectangle-holder">
            <div class="row">
              <div class="col-12">
                <p>Hello</p>
              </div>
              <div class="col-12">
                <button class="btn btn-primary" data-target="#comment7" data-toggle="collapse" type="button">Collapse</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="collapse" id="comment7">
                  <p>Collapsable!</p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</html>
1
Cristian 25 Oktober 2019, 13:34

1 menjawab

Jawaban Terbaik

Anda perlu menambahkan properti css align-items: flex-start;. Ini mendefinisikan perilaku default untuk bagaimana item fleksibel diletakkan di sepanjang sumbu silang pada baris saat ini. Dan flex-start mengatur tepi margin cross-start item ditempatkan pada garis cross-start.

.dragscroll {
    display: flex;
    overflow-x: auto;
    align-items: flex-start;
}
2
demkovych 25 Oktober 2019, 10:37