Css 是什么导致了这些巨大的差距？

我试图在此页面上显示查询中的几个项目。我正试图使他们，使6个图像是在一条线上，均匀间隔。然而，似乎无论我如何更改css，我仍然会在某些地方出现巨大的差距

以下是我用来创建此部分的代码：

    <div class="container2">
    <div class="category"><h2>All Items</h2></div>
        <div class="display">
          <?php do { ?>
            <ul>
                <li><a href="details.php?recordID=<?php echo $row_Master['Master_ID']; ?>"><img class="thumb" src="img/<?php echo $row_Master['Img']; ?>"/>
                <br />
                <?php echo $row_Master['Name']; ?></a></li>
            </ul>
            <?php } while ($row_Master = mysqli_fetch_assoc($Master)); ?>
          <!-- end .display --></div>
          <?php
        mysqli_free_result($Master);
        ?>
<!-- end .container2 --></div>

有人能帮我消除这些巨大的差距吗，plz？

Flexbox赢得比赛

使用此配置可以获得六个换行。flex容器获得：

display: flex;
flex-wrap: wrap;

弹性项目包括：

flex: 0 0 16.666%;

我在CSS中添加了一些注释来解释我在这里做了什么。这种方法需要一点实践，但一旦你得到它，你就再也不会在布局中使用浮动了

这里有一个很好的资源，可以很好地解释flexbox方法：

*{框大小：边框框；}
.展示{
边框：2倍纯红；/*仅用于演示可见性*/
}
.显示ul{
/*ul重置*/
列表样式：无；
填充：0；
保证金：0；
/*flexbox布局-flex容器配置*/
显示器：flex；
柔性包装：包装；
}
.显示ul li{
边框：2倍纯色道奇蓝；/*仅用于演示可见性*/
填充：10px；/*使用填充创建项目之间的间距，删除边框以获得最终外观*/
/*灵活项目配置*/
弹性：0 0 16.66%；/*100除以6等于16.666*/
}
.显示ul li span{
显示：块；
文本对齐：居中；
}
.显示ul li img{
最大宽度：100%；
高度：自动；
}

所有项目

Flexbox赢得比赛

使用此配置可以获得六个换行。flex容器获得：

display: flex;
flex-wrap: wrap;

弹性项目包括：

flex: 0 0 16.666%;

我在CSS中添加了一些注释来解释我在这里做了什么。这种方法需要一点实践，但一旦你得到它，你就再也不会在布局中使用浮动了

这里有一个很好的资源，可以很好地解释flexbox方法：

*{框大小：边框框；}
.展示{
边框：2倍纯红；/*仅用于演示可见性*/
}
.显示ul{
/*ul重置*/
列表样式：无；
填充：0；
保证金：0；
/*flexbox布局-flex容器配置*/
显示器：flex；
柔性包装：包装；
}
.显示ul li{
边框：2倍纯色道奇蓝；/*仅用于演示可见性*/
填充：10px；/*使用填充创建项目之间的间距，删除边框以获得最终外观*/
/*灵活项目配置*/
弹性：0 0 16.66%；/*100除以6等于16.666*/
}
.显示ul li span{
显示：块；
文本对齐：居中；
}
.显示ul li img{
最大宽度：100%；
高度：自动；
}

所有项目

您需要清除突出的元素上的浮动。或者尝试一种不同的方法，比如flexbox或grid。是的，这就像是flexbox用例的海报儿童。flexbox确实帮助了一些人，大的gabs已经消失了。然而，我仍然需要把它减少到一行6个，即使这些图像都是完全相同的大小，我似乎无法使这些行均匀。这是我的新css:.display{clear:tware；display:flex；flex wrap:wrap；padding:04px；justify content:center；align items:center；justify content:space around；overflow:hidden；}.display ul li{flex:14.29%；min width:14.29%；padding:04px；}.display ul{list style:none；}您需要清除突出的元素上的浮动。或者尝试一种不同的方法，比如flexbox或grid。是的，这就像是flexbox用例的海报儿童。flexbox确实帮助了一些人，大的gabs已经消失了。然而，我仍然需要把它减少到一行6个，即使这些图像都是完全相同的大小，我似乎无法使这些行均匀。这是我的新css：.display{clear:tware；display:flex；flex-wrap:wrap；padding:04px；justify-content:center；align-items:center；justify-content:space-around；overflow:hidden；}.display ul li{flex:14.29%；min-width:14.29%；padding:04px；}.display ul{list-style:none；}，它将所有图像放在左侧的一列中。我甚至试着用普通的php信息和body标记将它带到一个新页面。我用你的css在一个全新的样式表上设计了它。当我将flexbox布局移动到.display部分时，它开始做得更好。但是，只有部分设备的线路上有6个。我所有的图片都是190px 190px，所以我不明白为什么会搞砸，除非是文字造成的。我尝试将文字设置为与ul li相同的最大宽度，除了左边图片下方堆叠的文字外，这根本没有改变布局。宽度应该有一个真实来源，

li

元素。里面的所有东西都应该充满这个宽度。您在

span

元素中的文本是否与我的答案中的文本相同？是的，我的文本与您的文本完全相同。请在

li

元素上使用边框，以便您可以确切地看到它们在做什么。如果您看到任何宽度超过1/6的

li

，请检查其中的元件。图像和文本都需要CSS规则来确保它们不会超出预期的宽度。同时仔细检查

li

s上的

flex

规则，以及应用于它们的任何其他CSS，它们可以覆盖宽度