站点菜单的 CSS 样式

Question

我想为网站创建一个菜单，位于左侧，如下图所示。但是，当我编写代码并应用样式时，它无法正确显示并最终像图像的右侧一样。可能是什么问题？

**样式.css： **

.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* height: var(--mobile-nav-height); */
  height: (var(--vh, 1vh) * 100);
  background-color: var(--primary-container);
  color: var(--on-background-variant);
  padding-block: 12px 16px;
  z-index: 4;
  box-shadow: var(--shadow-1);
}

**index.html： **

<nav class="mobile-nav" aria-label="primary">
      <ul class="navbar-list">
        <li class="nav-item">
          <a href="./recipes.html" class="nav-link">
            <span class="item-icon">
              <span class="material-symbols-outlined" aria-hidden="true">
                lunch_dining
              </span>
            </span>
            <span class="label-medium">Recipes</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" aria-current="true">
            <span class="item-icon">
              <span class="material-symbols-outlined" aria-hidden="true">
                home
              </span>
            </span>
            <span class="label-medium">Home</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="./saved-recipes.html" class="nav-link">
            <span class="item-icon">
              <span class="material-symbols-outlined" aria-hidden="true">
                book
              </span>
            </span>
            <span class="label-medium">Saved</span>
          </a>
        </li>
      </ul>
    </nav>

请指导我设置菜单。谢谢你。

Answer 1

对于这个问题，您可以使用Flex属性来满足您的需求，我们可以按照左侧图片设置所有导航项。使用下面的 CSS 代码。

.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: (var(--vh, 1vh) * 100);
    background-color: var(--primary-container);
    color: var(--on-background-variant);
    padding-block: 12px 16px;
    z-index: 4;
    box-shadow: var(--shadow-1);
}

.mobile-nav .navbar-list {
    display: flex;
}

.mobile-nav .navbar-list .nav-item {
    flex: 1;
}

.mobile-nav .navbar-list .nav-item .nav-link {
    display: flex;
    flex-direction: column;
}

<nav class="mobile-nav" aria-label="primary">
    <ul class="navbar-list">
        <li class="nav-item">
            <a href="./recipes.html" class="nav-link">
                <span class="item-icon">
                    <span class="material-symbols-outlined" aria-hidden="true">
                        lunch_dining
                    </span>
                </span>
                <span class="label-medium">Recipes</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" aria-current="true">
                <span class="item-icon">
                    <span class="material-symbols-outlined" aria-hidden="true">
                        home
                    </span>
                </span>
                <span class="label-medium">Home</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="./saved-recipes.html" class="nav-link">
                <span class="item-icon">
                    <span class="material-symbols-outlined" aria-hidden="true">
                        book
                    </span>
                </span>
                <span class="label-medium">Saved</span>
            </a>
        </li>
    </ul>
</nav>