在HTML中紧紧包装列表项的网格

概述对于我正在制作的网站的一部分,我希望有一个正方形对象的网格,并将它们紧密地捆在一起,这样就没有空格了. 这是我所做的： 但这就是我想要它的样子： 到目前为止,我只是通过填充和添加边距,然后通过垂直对齐每个列表项来实现此目的.但我希望它比垂直对齐更进一步,我希望每个项目直接适合它上面的一个项目. 我确信有一个非常不同的,比我采取的更好的方法,这也会很棒！ 这就是我所做的： HTML： <header 对于我正在制作的网站的一部分,我希望有一个正方形对象的网格,并将它们紧密地捆在一起,这样就没有空格了.

这是我所做的：

但这就是我想要它的样子：

到目前为止,我只是通过填充和添加边距,然后通过垂直对齐每个列表项来实现此目的.但我希望它比垂直对齐更进一步,我希望每个项目直接适合它上面的一个项目.

我确信有一个非常不同的,比我采取的更好的方法,这也会很棒！

这就是我所做的：

HTML：

<header >        <ul >            <li>                <a ID="name">Temp</a>                <a ID="position">Temp</a>            </li>            <li>                <a ID="name">Temp</a>                <a ID="position">Temp</a>                <a ID="position">Temp</a>            </li>            <li>                <a ID="name">Temp</a>                <a ID="position">Temp</a>            </li>            <li>                <a ID="name">Temp</a>                <a ID="position">Temp</a>            </li>            <li>                <a ID="name">Temp</a>                <a ID="position">Temp</a>            </li>            <li>                <a ID="name">Temp</a>                <a ID="position">Temp</a>            </li>        </ul>    </header>

CSS：

body {  margin: 0;}.page {  background: #fff;}header.results {  max-wIDth: 100%;}header.results .container {  padding: 1em 0 2em;  margin: 0px auto 3px;  line-height: 1;}header.results .container li {  wIDth: 30%;  display: inline-block;  padding: 2em 2em 0.75em;  margin: 0px auto 3px;  background: rgb(240,240,240);  vertical-align: top;}header.results .container li #name {  text-align: center;  display: block;  margin-top: 0.5em;  Font-weight: 500;}header.results .container li #position {  text-align: center;  display: block;  margin-top: 0.5em;  Font-weight: 250;  Font-size: 85%;}

解决方法 如果您不支持旧浏览器(IE 8和9),则可以使用CSS列实现此功能,如 here.所示

为了获得完整的浏览器支持,我将使用jQuery masonry plugin.

总结

以上是内存溢出为你收集整理的在HTML中紧紧包装列表项的网格全部内容，希望文章能够帮你解决在HTML中紧紧包装列表项的网格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。