主页 / 问题 / 1124772
Accepted
Артур Франк
Asked:2020-05-13 17:38:51 +0000 UTC2020-05-13 17:38:51 +0000 UTC

ul li 多列列表（父 ul 不展开）

  • 772

我花了很多时间摆弄，我无法垂直而不是水平对齐子菜单中的所有元素：

1 4
2 5
3 6

我使用了 ul li 和 flex 构造，但是父 div 以某种方式不想拉伸以适应内容。目标是在子菜单中实现 2-3-4 列，如下所示：

在此处输入图像描述

.desctop-menu {
  width: 280px;
  background: #ffffff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
  -moz-box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
  box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
}

.categories-list {
  margin: 0;
  padding: 20px 0;
  list-style-type: none;
}

.categories-item {
  display: flex;
  padding: 0 20px;
}

.categories-item:hover {
  background-color: #f2f2f2;
}

.categories-item img {
  margin: 20px 20px 20px 0;
}

.categories-item:after {
  content: "";
  display: block;
  width: 10px;
  height: 60px;
  margin-right: -30px;
}

.categories-info {
  margin: auto 0;
  width: 100%;
}

.categories-info a {
  display: block;
  text-decoration: none;
  color: black;
}

.categories-info span {
  color: #b9b9b9;
  font-size: 0.8rem;
}

.subcategories-item {
  display: block;
  /** display: none **/
  position: absolute;
  margin: -10px 0 0 270px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
  -moz-box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
  box-shadow: 0px 1px 2px 1px rgba(219, 219, 219, 1);
  position: absolute;
  padding: 32px;
  z-index: 1000;
}

.subcategories-item li {
  page-break-inside: avoid;
  break-inside: avoid;
}

.subcategories {
  max-height: 236px;
}
<div class="desctop-menu">
  <ul class="categories-list">

    <li class="categories-item">
      <img src="https://c.dns-shop.ru/thumb/st1/fit_width/25/25/e805e9a66d0c74fcb2712ef9d47ce7b8/q100_a9172f7a3408f5119fb3803bf302f76a5ad3ac5da4f03600cb3b2af42df98a78.png" />
      <div class="categories-info">
        <a href="#">Бытовая техника</a>
        <span>для дома и офиса</span>
      </div>
      <ul class="subcategories-item">
        <div class="subcategories">
          <span><a>Утюг</a></span>
          <span><a>Утюг</a></span>
          <span><a>Утюг</a></span>

          <span><a>Утюг</a></span>
          <span><a>Утюг</a></span>
          <span><a>Утюг</a></span>
          <span><a>Утюг</a></span>
          <span><a>Утюг</a></span>

        </div>
      </ul>
    </li>



  </ul>
</div>

javascript

1 个回答

  1. Best Answer

    使用 flex-direction: column 时，Flex 存在宽度展开问题。所以使用网格是有意义的。

    添加到样式文件的末尾，这应该可以解决您的问题：

    .subcategories {
    max-height: unset;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
}

.subcategories span {
    display: block;
}
    • 1

相关问题