<div>
极客观点
项目管理
HarmonyOS
<ul>
<li><a>asdada1</a></li>
<li><a>asdada2</a></li>
<li><a>asdada3</a></li>
<li><a>asdada4</a></li>
<li><a>asdada5</a></li>
<li><a>asdada6</a></li>
<li><a>asdada7</a></li>
<li><a>asdada8</a></li>
<li><a>asdada9</a></li>
<li><a>asdada10</a></li>
<li><a>asdada11</a></li>
</ul></div>
在固定高度的div里，要想让列表竖直方向显示，并能自动换行到第二列
如小米官网这张图片，具体要怎么实现
这个很简单啊。结构就是：
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>然后左边写宽。右边定位。
http://runjs.cn/code/wnhejhmg
不知道是不是这意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
html,body,ul{margin: 0;padding: 0}
li{list-style-type: none}
#menu{width: 600px;border: 1px solid;margin: 50px auto;overflow: hidden}
#menu ul{width: 200px;float: left;}
#menu ul:nth-of-type(even){background: #eee}
#menu ul li{width: 180px;padding: 10px;font-size: 30px;text-align: center;}
#menu ul li:hover{background: #ccc}
</style>
</head>
<body>
<div id="menu"></div>
<script>
dom();
function dom(){
var arr=[], i;//模拟产品数据
for(i=0;i<14;i++){
arr.push('产品-'+(i+1));
}
var menu = document.getElementById('menu');
var html = '',
num = 6; //每列放置数量
//添加数据
for(i=0;i<arr.length;i++){
if((i%num)==0)
html+='<ul>';
html+= '<li>'+arr[i]+'</li>';
if((i%num)==(num-1))
html+='</ul>';
}
menu.innerHTML=html;
}
</script>
</body>
</html>3 回答5.1k 阅读✓ 已解决
5 回答2k 阅读
2 回答1.9k 阅读✓ 已解决
1 回答3k 阅读✓ 已解决
3 回答2.4k 阅读
4 回答2.2k 阅读
3 回答2.1k 阅读
ul的宽度有没有具体设置，如果没设置的话它的宽度是会自动变化的，就起不到约束效果。