明确地说，我不想remove内联块元素之间的空间 - 我想要add it.
我想要的是有一个菜单项网格，一行可以有 2、3 或 4 个项目，我希望使用媒体查询来实现。
我怎样才能在我的 li 项目之间添加空间，但也有每行左右两侧无边距？ （填充无法解决此问题。）我可以仅使用 CSS 来实现此目的吗？
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: solid 1px;
font-size: 0;
}
#main {
max-width: 450px;
margin: 0 auto;
}
.item {
display: inline-block;
width: 200px;
}
.item img {
width: 200px;
}
.clearfix {
overflow: auto;
}
li {
list-style-type: none;
}
<div id="main">
<li class="item clearfix">
<a href="project.html">
<div class="thumb">
<img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
</a>
</li>
<li class="item clearfix">
<a href="project.html">
<div class="thumb">
<img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
</div>
</a>
</li>
</div>
也许这会对你有帮助
<html><head>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: solid 1px;
font-size: 0;
}
#main {
max-width: 452px;
margin: 0 auto;
}
.item {
display: inline-block;
width: 150px;
}
.item1 {
display: inline-block;
width: 150px;
padding:0px 4px;
}
.item img {
width: 200px;
}
.clearfix {
overflow: auto;
}
li {
list-style-type: none;
}
</style>
</head>
<body>
<div id="main">
<li class="item clearfix">
<a href="project.html">
<div class="thumb">
<img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
</a>
</li>
<li class="item1 clearfix">
<a href="project.html">
<div class="thumb">
<img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
</a>
</li>
<li class="item clearfix">
<a href="project.html">
<div class="thumb">
<img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
</div>
</a>
</li>
</div>
</body></html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
