如何在行内块元素之间增加空间？
[英]How to add space between inline-block elements?
问题描述
To be clear, I do not want to remove space between inline-block elements - I want to add it. 
需要明确的是，我不想删除行内块元素之间的空间-我想添加它。
What I want is to have a grid of menu items that could have 2, 3 or 4 items to a line, which I'd like to achieve using media queries. 我想要的是一个菜单项网格，其中一行可能有2、3或4个项，我想使用媒体查询来实现。
How can I add space between my li items, but also have no margin on the left and right sides of each row ? 如何在li项之间添加空间，但每行的左侧和右侧也没有边距 ？ (Padding will not fix this.) Can I achieve this using only CSS? （填充无法解决此问题。）是否可以仅使用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 个解决方案
解决方案1
2 2015-07-22 12:16:52
Have you tried changing the padding: 您是否尝试过更改填充：
.item{
display: inline-block;
width: 200px;
padding: 5px;
}
解决方案2
2 已采纳 2015-07-22 12:32:00
Maybe this will help you 也许这对您有帮助
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.