कुछ तत्व हैं जो सरणी से आते हैं, फिर मुझे उन्हें एक डिप्ले फ्लेक्स के साथ एक सूची में रखने की आवश्यकता है, मेरी समस्या यह है कि मैंने एक बटन जोड़ा है जो चयनित को ध्वस्त कर देना चाहिए, लेकिन दूसरों को उनकी ऊंचाई भी संशोधित हो जाती है ...

ली तत्वों पर अलग-अलग प्रदर्शन और इनलाइन रखने की कोशिश की है लेकिन कुछ भी काम नहीं करता है।

किसी सूची में तत्वों को इनलाइन करने और स्वतंत्र होने का कोई तरीका?

.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 अक्टूबर 2019, 13:34

1 उत्तर

सबसे बढ़िया उत्तर

आपको css गुण जोड़ने की आवश्यकता है संरेखित-आइटम: flex-start;। यह डिफ़ॉल्ट व्यवहार को परिभाषित करता है कि वर्तमान लाइन पर क्रॉस अक्ष के साथ फ्लेक्स आइटम कैसे रखे जाते हैं। और फ्लेक्स-स्टार्ट आइटम के क्रॉस-स्टार्ट मार्जिन किनारे को क्रॉस-स्टार्ट लाइन पर रखा गया है।

.dragscroll {
    display: flex;
    overflow-x: auto;
    align-items: flex-start;
}
2
demkovych 25 अक्टूबर 2019, 10:37