html - 简单的 html 代码我遇到了这么困难的时间

Question

好吧，说真的，我觉得自己很愚蠢，因为我无法解决这个问题，我想这只是星期一之类的。无论如何，我只是想做类似 this as well as the logic I'm using 的东西.

.所以我把发生的事情写进了 js fiddle

为你们所有人，希望你们能有所帮助。

我知道这将是最终让我觉得自己很愚蠢的事情之一，但出于某种原因我无法弄清楚哪里出了问题。

HTML5

        <div id="logo-wrapper">
            <ul>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
            </ul>

            <ul>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
            </ul>

            <ul>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
            </ul>
        </div>

CSS3

#logo-wrapper {
width: 70%;
margin: 2% auto;
background-color: #2CAD96;
}

#logo-wrapper ul {
margin: 2%;
float: left;
background-color: #FFFFFF;
}

#logo-wrapper ul li {
list-style: none;
display: block;
margin: 2%;
}

#logo-wrapper ul li img{
width: 200px;
height: 100px;
}

Answer 1

ul 列表有默认填充，因此您可能希望使用 padding:0; 删除它。 您还可以将#logo-wrapper 的宽度设置为某个值，即使里面的图像可能不适合。因此，您可以使用 width:100%;height:auto; 缩放图像，或者不在包装器上设置宽度。

此外，您还需要将 display:inline-block; 添加到 ul 和 li 元素，并将它们的宽度设置为 40% 左右。

最后在#logo-wrapper 上添加填充而不是边距。

编辑:这里是 JSFiddle http://jsfiddle.net/6AvNM/9/如果你再调整一下，你就会把方 block 整理好:)