Question

来自我无权访问的PHP文件，我收到了一堆<li>元素，其中包含一个“liElHtml”类。包含在这些图像中，所以基本上我通过AJAX接收到它：

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

无论如何都要将这些整齐/均匀地堆叠在3行而没有静态宽度？通过将3 <li>的组合宽度设置为<ul>，我知道如何执行此操作的唯一方法。我已经用Google搜索了，似乎静态宽度是我看到的唯一方式。

不幸的是，这必须是3行，100％宽度才能填满屏幕，因为它适用于手机。现在只是为了让它工作我设置一个静态宽度，所以我有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%上将宽度设置为#mainScreenUL并让<li>整齐地叠加到只有3行？感谢您抽出宝贵时间阅读本文，非常感谢任何帮助。

Answer 1

如果所有li具有相同的高度，您可以轻松地浮动它们并以这种方式指定33.33％的宽度

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

然后记得将浮动清除应用于ul元素

Answer 2

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选择器，但您可能会遇到一些浏览器支持。