时间戳

首页 > 解决方案 > 根据页面宽度动态堆叠 Nav LI 项目

html - 根据页面宽度动态堆叠 Nav LI 项目

问题描述

我的 li 项目占据了它们文本的整个宽度，并在其中创建了第二行，而不是向下分解到 li 本身。我尝试了以下方法，但它并没有真正提供我想要添加的响应式大小。

.sub-nav li > a {
    width: min-content;
    line-height: 1.1em;
}

https://www.harpercollege.edu/academics/index.php

标签： htmlcss

解决方案

将 CSS 规则更改.sub-nav ul为：

.sub-nav ul {
    display: flex;
    margin-top: 0;
    padding-left: 70px;
    margin-bottom: 10px;
    height: min-content;
    flex-wrap: nowrap;
}

您可能想减小字体大小，并使用压缩字体https://fonts.google.com/?query=condensed

推荐阅读