代码之家 › 专栏 › 技术社区 › HelloWorld1

列出响应性设计的清单

responsive-design css html javascript

HelloWorld1 · 技术社区 · 4 年前

目标:
使列表(ul及其li)与屏幕宽度相关,具有响应性设计。

问题:
我不知道怎么解决它。

信息:
*你需要考虑每个ul列表中的li数量。不同的响应设计取决于ul的宽度。
*每个ul可以是1到10 li或更多的随机值。

杰宾:
https://jsbin.com/xibalahave/edit?html,css,output

非常感谢。

.aaa ul.listlist {
  margin: 10px 0 16px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.aaa ul.listlist li {
  font-size: 1.125rem;
  display: block;
  margin-right: 24px;
  line-height: 22px;
  border-radius: 12px 12px 12px 12px;
  padding: 8px 24px;
  background-color: #00FFFF;
  white-space: nowrap;
}

<div class="aaa">
  <ul class="listlist">
    <li>1Test 1</li>
    <li>1Test 2</li>
    <li>1Test 3</li>
  </ul>
</div>
<br />
<div class="aaa">
  <ul class="listlist">
    <li>1Test 1</li>
    <li>1Test 2</li>
    <li>1Test 3</li>
    <li>1Test 4</li>
  </ul>
</div>
<br />
<div class="aaa">
  <ul class="listlist">
    <li>1Test 1</li>
    <li>1Test 2</li>
  </ul>
</div>

1 回复 | 直到 4 年前

Leo 4 年前

你可以简单地添加一个 flexwrap: wrap; 装到容器里 li ,它将允许子元素(此处, 锂 ),转到另一行。我邀请您了解flexbox及其所有特性,这对响应性设计非常有帮助!过来看 here .

.listlist{
  display: flex;
  flex-wrap: wrap;
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前