图像在水平列表中没有正确排列

Question

我犯了什么简单的 CSS 错误？

我在 ul 中设置了许多图像作为图库的一部分，每个图像都悬停在文本框上

对于除移动断点之外的所有内容，我希望它们（缩略图版本）排列成 4 个。

通过将宽度设置为 25%，我认为下面的方法可以解决这个问题，但它会将宽度分成 3 个，容器右侧有一堆空间 - 就好像容器上有填充或边距一样强制换行的图像。

图像的所有边上似乎也有少量边距或填充。我已经通过浏览器仔细检查了每个元素，并且没有应用我可能错过的其他流氓样式的边距或填充。

JSFiddle Example Here

更新：在我的小提琴示例中，悬停文本框显然超出了图像的右边缘，但 css 将其宽度设置为 100%。是不是我的定位搞砸了？

链接到www.deckdoctors.net/bay-area-deck-ideas.html的实时页面

HTML 节略：

<div id="gallery">
    <ul class="nivo">
        <li>
            <a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
            <span>Some overlay text</span></a>
        </li>
        <li>
            <a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
            <span>Some overlay text</span></a>
        </li>
        <li>
            <a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
            <span>Some overlay text</span></a>
        </li>
        <li>
            <a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
            <span>Some overlay text</span></a>
        </li>
    </ul>
</div>

缩写 CSS：

#gallery {
    width:100%;
    padding:0;
    }

#gallery ul {
    list-style:none;
    margin:0;
    padding:0;
    }

#gallery ul li {
    display:inline;
    position:relative;
    margin:0;
    padding:0;
    }

#gallery ul li span {
    visibility:hidden;
    position:absolute;
    width:100%;
    left:0;
    bottom:0px;
    z-index:3;
    background:rgba(0,0,0,.6);
    color:#FFF;
    text-align:center;
    }

    #gallery ul li:hover span {
        visibility:visible;
        }


#gallery ul li a img {
    width:25%;
    margin:0;
    padding:0;
    }

Answer 1

问题来了：

行内元素后面会有空格，这会使行中的最后一项下降到下一行，因此如果您设置宽度为 25%，则需要计算每个 <li> 之后产生的空格。

更好的方法是在<li> 上使用float: left（使元素成为“块级”）并将其宽度设置为25%。

例如。

ul li {float: left; width: 25%}

看到这个小提琴：http://jsfiddle.net/pavkr/685m0b5z/

还可以在您的网站上查看此屏幕截图：

Answer 2

这是我的解决方法：http://jsfiddle.net/3rmzz59m/1/

我认为问题与内联lis有关；当涉及到内联元素时，大小调整有点奇怪。通过将它们更改为 inline-block 并改为在 li 元素上设置宽度，它们周围的额外间距就会消失。

Answer 3

将图片的宽度设为 24% 而不是 25%

#gallery ul li a img {
    width:24%;
    margin:0;
    padding:0;
    }

还为图库设置 text-align:center:

#gallery {
    width:100%;
    padding:0;
    text-align: center;
    }

查看此演示：http://jsfiddle.net/3rmzz59m/2/