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％，则需要对每个{{{ 1}}。

更好的方法是在<li>上使用float：left（使元素＆＃39;块级＆＃39;）并将其宽度设置为25％。

例如

<li>

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

另请参阅您网站上的此屏幕截图： enter image description here

Answer 2

这是我的修复：http://jsfiddle.net/3rmzz59m/1/

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

Answer 3

使图像宽度为24％而不是25％

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

还为Gallery设置了text-align：center：

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

结帐本次演示：http://jsfiddle.net/3rmzz59m/2/

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

3 个答案: