logo标签列表

如何在inline-block元素之间添加空格？

htmlcss
7
要明确的是，我不想去除内联块元素之间的空白 - 我想要添加它。我想要一个菜单项网格，每行可以有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>

2
HTML不合法，li必须直接位于ul或ol下。 - Stickers
2个回答
2

您尝试更改填充吗：

.item{
    display: inline-block;
    width: 200px;
    padding: 5px;
}
是的，谢谢。如果不够清楚，我想要在li项目与父div相遇的地方没有空间-边距或填充。我希望边缘紧贴着div。 - user3821345
你需要注释掉</li>和下一个<li>之间的空格，或者将它们直接写在同一行中。行内元素将换行视为3像素的边距（不知道为什么）。 你可以这样做： </li><!-- --><li> - Kristine
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接