Question

要明确，我不想在内联块元素之间删除空间 - 我想添加它。

我想要的是有一个菜单项网格，可以有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>

Answer 1

您是否尝试过更改填充：

.item{
    display: inline-block;
    width: 200px;
    padding: 5px;
}

Answer 2

也许这会对你有所帮助

<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>

如何在内联块元素之间添加空格？

2 个答案: