网格样式列表-带有多个<ul>和可变<li>标记
网格样式列表-带有多个<ul>和可变<li>标记
提问于 2017-05-05 14:26:12
我有一个复杂的问题，在这个问题中，我有一些生成的不能更改--我需要以网格的方式显示它。
我将永远有3个ul标签。
这些ul将有一个可变的李数-在0-5之间，但李的总总数为6。
例如，我可以拥有这个：
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>或者，可能是这样的：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
</ul>
<ul>
<li></li>
</ul>现在，我总是需要的布局是2行3在桌面上，3行2在较小的设备。李氏的宽度应该是均匀的。
我试过使用灵活的网格，但是李的宽度总是与Ul的宽度一致，而不是外部容器的宽度。有没有人知道这样的事情是否可能。
我将重新迭代，在目前，更改html不是一个选项。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-05-05 14:58:38
使用Flexbox不能做到这一点，所以如果不能使用脚本，而不能使用更改标记，则可以使用float完成这一任务
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
width: calc(33.333% - 10px);
margin: 5px;
height: 30px;
background: lightgray;
}
/* for wider screens, such as desktop */
@media screen and (min-width: 768px) {
li {
width: calc(50% - 10px);
}
}Markup sample 1
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div style="clear: both"></div>
Markup sample 2
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
</ul>
<ul>
<li></li>
</ul>
由于您明确声明不能更改标记，但不使用脚本，所以这里有一个说明
标记示例1
(function() {
window.addEventListener('load', function() {
var uls = document.querySelectorAll('ul');
for (var i = 1; i < uls.length; i++) {
var lis = uls[i].querySelectorAll('li');
for (var j = 0; j < lis.length; j++) {
uls[0].appendChild(lis[j]);
}
uls[i].innerHTML = ''; // make them empty so CSS rule kicks in
}
});
})();ul:empty {
display: none;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
li {
flex-basis: calc(33.333% - 10px);
margin: 5px;
height: 30px;
background: lightgray;
}
/* for wider screens, such as desktop */
@media screen and (min-width: 768px) {
li {
width: calc(50% - 10px);
}
}<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
标记示例2
(function() {
window.addEventListener('load', function() {
var uls = document.querySelectorAll('ul');
for (var i = 1; i < uls.length; i++) {
var lis = uls[i].querySelectorAll('li');
for (var j = 0; j < lis.length; j++) {
uls[0].appendChild(lis[j]);
}
uls[i].innerHTML = ''; // make them empty so CSS rule kicks in
}
});
})();ul:empty {
display: none;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
li {
flex-basis: calc(33.333% - 10px);
margin: 5px;
height: 30px;
background: lightgray;
}
/* for wider screens, such as desktop */
@media screen and (min-width: 768px) {
li {
width: calc(50% - 10px);
}
}<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
</ul>
<ul>
<li></li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43807481
复制相关文章
相似问题
腾讯云开发者
