javascript - 3 具有可变屏幕宽度的行 ul

Question

从我无权访问的 PHP 文件中，我收到一堆<li>带有“liElHtml”类的元素。其中包含的是图像，所以基本上我是通过 AJAX 收到的：

<li class="liElHtml"><img src="some_img.png" /></li>

有没有办法将这些整齐/均匀地堆叠成 3 行而没有静态宽度？我知道如何通过将 3 的组合宽度设置<li>为<ul>. 我用谷歌搜索了一下，似乎静态宽度是我看到的唯一方式。

不幸的是，这必须是 100% 宽度的 3 行才能填满屏幕，因为它是用于手机的。现在只是为了让它工作，我设置了一个静态宽度，所以我有 html：

<ul id="mainScreenUL">
</ul>

CSS：

#mainScreenUL{
    list-style:none;
    width:150px;
}

#liElHtml{
   display:inline-block;
   width:50px;
   height:50px;
}

和 jQuery/javascript

$('#mainScreenUL').html(pic_data[1]);

这pic_data[1]只是一长串<li class="liElHtml"><img src="some_img.png" /></li>

这给了我一些想要的效果，无论如何我可以将宽度设置为width:100%on#mainScreenUL并让<li>'s 整齐地堆叠成 3 行吗？感谢您花时间阅读本文，非常感谢您的帮助。

score 3 · Accepted Answer

如果都li具有相同的高度，您可以轻松地将它们浮动并以这种方式分配 33.33% 的宽度

li {
   float: left;
   width: 33.33%;
}

然后只记得对ul元素应用浮动清除

score 1 · Accepted Answer

li {
   float: left;
   width: 33.33%;
}

如果您想要 100% 并且可以编辑 HTML，则将第一个和最后一个列表项设置33%为34%.

li {
    float: left;
}

.first, ,last {
    width: 33%;
}

.middle {
    width: 34%;
}

33.33%如果您想要边框/边距等，这会发生变化，但会消除使用叶子的微小间隙。

如果您无法触摸 HTML，那么您始终可以使用:first-child和:last-child选择器，但您可能会遇到一些浏览器对它们的支持。

2 回答 2