对于我正在制作的网站的一部分,我希望有一个正方形对象的网格,并将它们紧密地捆在一起,这样就没有空格了.
这是我所做的:
但这就是我想要它的样子:
到目前为止,我只是通过填充和添加边距,然后通过垂直对齐每个列表项来实现此目的.但我希望它比垂直对齐更进一步,我希望每个项目直接适合它上面的一个项目.
这就是我所做的:
HTML:
<header class="results"> <ul class="container"> <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%; }
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。