gpt4 book ai didi

html - 如何在行内 block 元素之间添加空间?

转载 作者:搜寻专家 更新时间:2023-10-31 08:17:01 25 4
gpt4 key购买 nike

明确地说,我不想删除行内 block 元素之间的空格 - 我想添加它。

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

关于html - 如何在行内 block 元素之间添加空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31562815/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com