Question

我正在使用CSS列将菜单项跨越多个列，在大多数情况下都可以正常工作，但是我的问题是我不确定是否有办法确保每个 direct 子元素都保留在同一列中。

所以我的意思是，如果孩子的 contents 出现的时间太长而无法包含在当前列中，那么整个内容将被移至下一个列，而不是跨度多列中的内容。

此处的示例： https://codepen.io/gutterboy/pen/YzzgqVz

如您所见，标题2 和标题4 都跨越多列-可以确保每个子菜单的内容都包含在其中一栏？

我考虑过使用 flexbox 并设置flex-flow: column wrap;和高度；但是由于面积为absolute，因此宽度成为问题；尽管在此示例中不可见，但由于面积太小（要相对于其元素小得多，因此将其设置为100％无效），删除宽度成为一个问题。保留原样意味着内容很可能会溢出该区域。

HTML示例：

<div class="wrapper"> <ul class="menu"> <li> <a href="#">Heading 1</a> <ul class="sub-menu"> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> </ul> </li> <li> <a href="#">Heading 2</a> <ul class="sub-menu"> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> </ul> </li> <li> <a href="#">Heading 3</a> <ul class="sub-menu"> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> </ul> </li> <li> <a href="#">Heading 4</a> <ul class="sub-menu"> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> </ul> </li> <li> <a href="#">Heading 5</a> <ul class="sub-menu"> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> <li> <a href="#">Item</a> </li> </ul> </li> </ul> </div>

SCSS示例：

.wrapper { position: relative; padding: 10px 20px; } li { list-style: none; } .menu { position: absolute; width: 45vw; columns: 3 130px; column-gap: 70px; padding: 20px 25px; background-color: gray; } .menu a { color: #fff; } .menu > li { padding-top: 10px; } .menu > li > a { font-size: 17px; font-weight: bold; text-decoration: none; } .menu > li > ul { padding: 12px 0 0 15px; } .menu > li > ul > li { line-height: 1.4; }

Answer 1

我不太确定我是否明白你的意思，但是我想你想将每个菜单放在它自己的列中。您可以使用以下CSS网格布局轻松实现此目标：

.wrapper {
  padding: 10px 20px;
}

.menu {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(5, 1fr);
}

li {
  list-style: none;
}

.menu {
  position: absolute;
  columns: 3 130px;
  column-gap: 40px;
  padding: 20px 25px;
  background-color: gray;
}

.menu a {
  color: #fff;  
}

.menu > li {
  padding-top: 10px;
}

.menu > li > a {
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
}

.menu > li > ul {
  padding: 12px 0 0 15px;
}

.menu > li > ul > li {
  line-height: 1.4;
}

<div class="wrapper">
  <ul class="menu">
    <li>
      <a href="#">Heading 1</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 2</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 3</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 4</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
    <li>
      <a href="#">Heading 5</a>
      <ul class="sub-menu">
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>        
        <li>
          <a href="#">Item</a>
        </li>        
      </ul>
    </li>
  </ul>
</div>

使用CSS列，并确保直接子级的内容不包装

1 个答案: