Question

如何在第一列中显示项目01至07，在第二列中显示项目08至10（不足以填充第一列）？

我有一个非常简单的导航栏，如下所示：

.test ul {
  list-style-type: none;
}

.test ul li {
  float: left;
  width: 250px;
  height: 120px;
  border: 1px solid black;
  text-align: center;
}

.test ul li ul {
  display: none;
}

.test li:hover ul {
  display: block;
}

<div class="test">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C
      <ul>
        <li>C01</li>
        <li>C02</li>
        <li>C03</li>
        <li>C04</li>
        <li>C05</li>
        <li>C06</li>
        <li>C07</li>
        <li>C08</li>
        <li>C09</li>
        <li>C10</li>
      </ul>
    </li>
  </ul>
</div>

如果在本地运行，则可以看到不是所有10个项目都可以在一个屏幕上显示。

所以，我有一个解决方案，即在第二列中显示项目8-10，使其与项目1-3对齐，但是我不知道如何在CSS中进行操作。

Answer 1

CSS-Grid可以做到：

elide: Text.ElideRight

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-grid;
  grid-template-rows: repeat(7, max-content);
  grid-auto-flow: column;
  grid-column-gap:.25em;
}

li {
border:1px solid grey;
padding:.25em;
}

如何使列表项从特定点开始显示在两列中？

1 个答案: