当<ul>为flex时，使<ul>元素在指定高度内垂直滚动

问题描述 投票：0回答：1

我有一个实时搜索栏，仅显示在移动屏幕上。

CSS：

.search-results {
  z-index: 9999;
  width: 80vw;
  position: absolute;
  top: 80%;
  left: 10%;
}

.search-results li {
  width: 100%;
  overflow: hidden;
}

.link-p-colr {
  color: #333;
  text-decoration: none;
  padding-bottom: 1rem;
}

.live-outer {
  display: flex;
  align-items: center;
  /* Vertically center the content */
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #ccc;
  background: #fff;
  padding-bottom: 1rem;
}

.live-im img {
  width: 60px;
  /* Set a fixed width for the image */
  height: 60px;
  flex-shrink: 0;
  /* Ensure the image container doesn't shrink */
}

.live-product-det {
  flex-grow: 1;
  /* Allow the product details container to grow to fill the remaining space */
  height: 60px;
  overflow: hidden;
}

.live-product-name p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<form class="py-3 d-flex justify-content-end d-md-none custom-form position-relative" style="background-color:#FFDB58;" method="get" autocomplete="off" id="search2">
  <input class="form-control w-50 ms-auto" name="search" type="search" placeholder="Search" aria-label="Search" id="mu">
  <ul class="search-results list-group list-unstyled bg-white" id="livesearch2">
    <li class="p-3 d-inline">
      <a class="link-p-colr" href="http://gadgets92.test/mobiles/product.php?id=2">
        <div class="live-outer">
          <div class="live-im">
            <img style="width: fit-content; height: 60px;" src="http://gadgets92.test/admin/images/products/s7 edge.jpeg">
          </div>
          <div class="live-product-det ps-3">
            <div class="live-product-name">
              <p>Samsung Galaxy S7 Edge (4GB RAM +32)</p>
            </div>
            <div class="live-product-price">
              <div class="live-product-price-text">
                <p>Rs.50,999</p>
              </div>
            </div>
          </div>
        </div>
      </a>
    </li>

    <li class="p-3 d-inline">
      <a class="link-p-colr" href="http://gadgets92.test/watches/product.php?id=5">
        <div class="live-outer">
          <div class="live-im">
            <img style="width: fit-content; height: 60px;" src="http://gadgets92.test/admin/images/products/samsung-watch-4.png">
          </div>
          <div class="live-product-det ps-3">
            <div class="live-product-name">
              <p>Samsung Watch 4 Smartwatch</p>
            </div>
            <div class="live-product-price">
              <div class="live-product-price-text">
                <p>Rs.36,499</p>
              </div>
            </div>
          </div>
        </div>
      </a>
    </li>

    <li class="p-3 d-inline">
      <a class="link-p-colr" href="http://gadgets92.test/televisions/product.php?id=15">
        <div class="live-outer">
          <div class="live-im">
            <img style="width: fit-content; height: 60px;" src="http://gadgets92.test/admin/images/products/samsung-ua85cu8000kxxl.webp">
          </div>
          <div class="live-product-det ps-3">
            <div class="live-product-name">
              <p>Samsung UA85CU8000KXXL 85 inches 4K Smart TV</p>
            </div>
            <div class="live-product-price">
              <div class="live-product-price-text">
                <p>Rs.8,46,999</p>
              </div>
            </div>
          </div>
        </div>
      </a>
    </li>
  </ul>
  <button class="btn btn-success custom-btn me-auto" type="submit">Search</button>
</form>

使 ul 元素可以在指定高度内垂直滚动，而不影响 li 元素。 我用过bootstrap 5.3

我已经尝试过了

    <style>
        .search-results {
            max-height: 500px;
            overflow: hidden;
            overflow-y: scroll;
            padding: 0;
        }

        .search-results li {
            padding: 5px 10px;
        }
    </style>

我也尝试过这里的解决方案

溢出：隐藏和溢出-y：在 ul 上滚动不起作用；

html css bootstrap-5
1个回答
0
投票

我添加了

max-height: 20vw;
和
overflow-y: auto;
到
.search-results
。并且，从 
overflow:hidden;
中删除了 
.search-results li
。

.search-results {
  z-index: 9999;
  width: 80vw;
  position: absolute;
  top: 80%;
  left: 10%;
   max-height: 20vw; /* Set a maximum height for scroll */
  overflow-y: auto; /* Enable vertical scrolling */
}

.search-results li {
  width: 100% !important;
}

.link-p-colr {
  color: #333;
  text-decoration: none;
  padding-bottom: 1rem;
}

.live-outer {
  display: flex;
  align-items: center;
  /* Vertically center the content */
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #ccc;
  background: #fff;
  padding-bottom: 1rem;
}

.live-im img {
  width: 60px;
  /* Set a fixed width for the image */
  height: 60px;
  flex-shrink: 0;
  /* Ensure the image container doesn't shrink */
}

.live-product-det {
  flex-grow: 1;
  /* Allow the product details container to grow to fill the remaining space */
  height: 60px;
  overflow: hidden;
}

.live-product-name p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<form class="py-3 d-flex justify-content-end d-md-none custom-form position-relative" style="background-color:#FFDB58;" method="get" autocomplete="off" id="search2">
  <input class="form-control w-50 ms-auto" name="search" type="search" placeholder="Search" aria-label="Search" id="mu">
  <ul class="search-results list-group list-unstyled bg-white" id="livesearch2">
    <li class="p-3 d-inline">
      <a class="link-p-colr" href="http://gadgets92.test/mobiles/product.php?id=2">
        <div class="live-outer">
          <div class="live-im">
            <img style="width: fit-content; height: 60px;" src="http://gadgets92.test/admin/images/products/s7 edge.jpeg">
          </div>
          <div class="live-product-det ps-3">
            <div class="live-product-name">
              <p>Samsung Galaxy S7 Edge (4GB RAM +32)</p>
            </div>
            <div class="live-product-price">
              <div class="live-product-price-text">
                <p>Rs.50,999</p>
              </div>
            </div>
          </div>
        </div>
      </a>
    </li>

    <li class="p-3 d-inline">
      <a class="link-p-colr" href="http://gadgets92.test/watches/product.php?id=5">
        <div class="live-outer">
          <div class="live-im">
            <img style="width: fit-content; height: 60px;" src="http://gadgets92.test/admin/images/products/samsung-watch-4.png">
          </div>
          <div class="live-product-det ps-3">
            <div class="live-product-name">
              <p>Samsung Watch 4 Smartwatch</p>
            </div>
            <div class="live-product-price">
              <div class="live-product-price-text">
                <p>Rs.36,499</p>
              </div>
            </div>
          </div>
        </div>
      </a>
    </li>

    <li class="p-3 d-inline">
      <a class="link-p-colr" href="http://gadgets92.test/televisions/product.php?id=15">
        <div class="live-outer">
          <div class="live-im">
            <img style="width: fit-content; height: 60px;" src="http://gadgets92.test/admin/images/products/samsung-ua85cu8000kxxl.webp">
          </div>
          <div class="live-product-det ps-3">
            <div class="live-product-name">
              <p>Samsung UA85CU8000KXXL 85 inches 4K Smart TV</p>
            </div>
            <div class="live-product-price">
              <div class="live-product-price-text">
                <p>Rs.8,46,999</p>
              </div>
            </div>
          </div>
        </div>
      </a>
    </li>
  </ul>
  <button class="btn btn-success custom-btn me-auto" type="submit">Search</button>
</form>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.