html - 响应式列表项

标签 html css responsive

在响应模式下,我需要将一些单行 li 放置到多行 li。 lis 的宽度不一样。不可能使用 % 。 lis 将从每一行开始。

我该怎么做?

enter image description here

最佳答案

为此我推荐 CSS Flexbox:

ul {
    display: flex;
    flex-wrap: wrap
}

您会看到随着屏幕尺寸的缩小,li 元素将换行到下一行。

示例:https://jsfiddle.net/rmfx4qdw/

关于html - 响应式列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55918199/

相关文章:

html - 如何在移动设备中制作具有两个元素的 div 行响应式

html - css 仅水平子导航

javascript - 单页上有多个表单时表单提交的最佳实践

html - 导航栏中的多级菜单与工作

css - 在 XSL-FO 中使用外部 CSS

html - 在响应式中垂直居中旋转木马元素

html - 文本不以响应式背景图像为中心

javascript - Google Charts 注释时间线提示未出现

html - 表格中 Strage 1px 白色边框

jQuery CSS 定位信息未在 Firefox 上更新