Question

我正在尝试设置嵌套列表的样式，以便在自己的容器中（水平）显示每个级别，然后在后续容器中显示（水平）子列表;每个级别最多只存在一个子列表，因此可以始终明确指示父项。

我能看到的唯一方法是确保某些项目（即带有子列表的兄弟之后的那些项目）在其级别（而不是在子列表之后呈现）的正确“行”中删除子列表position: absolute;的正常流量。这让我非常接近我想要的东西，但是我需要将子列表移动到位 - 但是它的正确垂直位置取决于容器的父级别的高度：例如，父级别可能包含很多项目列表包装在其容器中并扩展高度。

我知道我可以使用JavaScript将子列表移动到位，但是有一种纯粹的CSS方式来完成我想要的东西（无论是否涉及一些绝对定位的块可以相对于另一个元素定位的技巧，或者否则在正常流程中阻止兄弟姐妹出现在他们之前的块之后？？

以下示例 -

.container {
  width: 600px;
  margin: auto;
  position: relative;
}

ul {
  border: 1px solid lightgrey;
  width: 100%;
  text-align: center;
  padding: 1em;
}

.level2 {
  background-color: lightgrey;
  position: absolute;
  left: 0;
  margin-top: 2em;
}

li {
  display: inline-block;
  padding: 0.5em;
  margin: 0.5em;
  border: 1px dashed blue;
  text-transform: uppercase;
  font-weight: normal;
}

.expanded {
  font-weight: bold;
  text-decoration: underline;
}

<div class="container">
  <ul class="level1">
    <li>One</li>
    <li class="expanded">
      Two
      <ul class="level2">
        <li>Alpha</li>
        <li>Beta Gamma Delta</li>
        <li>Epsilon</li>
        <li>Zeta Eta Theta</li>
        <li>Iota</li>
      </ul>
    </li>
    <li>Three Four</li>
    <li>Five Six Seven</li>
    <li>Eight Nine Ten</li>
    <li>Eleven</li>
  </ul>
</div>

Answer 1

您始终可以将父ul的位置设置为相对位置，然后子菜单的绝对位置top:100%将始终位于父菜单下方。

来自MDN

对于绝对定位的元素，顶部，右侧，底部和左侧属性指定元素边缘的偏移量块（元素相对于的位置）。的边缘然后将元素定位在这些偏移内。

如下

.container {
    width: 600px;
    margin: auto;
}
ul {
    border: 1px solid lightgrey;
    width: 100%;
    text-align: center;
    padding: 1em;
    position: relative; /* positioning context */
}
.level2 {
    background-color: lightgrey;
    position: absolute;
    left: 0;
    top:100%; /* always at the bottom */
    margin-top: 2em; /* additional spacing */
}
li {
    display: inline-block;
    padding: 0.5em;
    margin: 0.5em;
    border: 1px dashed blue;
    text-transform: uppercase;
    font-weight: normal;
}
.expanded {
    font-weight: bold;
    text-decoration: underline;
}

<div class="container">
    <ul class="level1">
        <li>One</li>
        <li class="expanded">Two
            <ul class="level2">
                <li>Alpha</li>
                <li>Beta Gamma Delta</li>
                <li>Epsilon</li>
                <li>Zeta Eta Theta</li>
                <li>Iota</li>
            </ul>
        </li>
        <li>Three Four</li>
        <li>Five Six Seven</li>
        <li>Eight Nine Ten</li>
        <li>Eleven</li>
        <li>Twelve</li>
        <li>Thirteen</li>
        <li>Fourteen</li>
    </ul>
</div>

是否可以使用纯CSS水平设置嵌套列表的每个级别？

1 个答案: