以下是JSFillde.net
上的代码当.a在#t中断时，它会在#t的右侧留下额外的空白区域。我该如何删除它？
#t {
height: 160px;
background-color: #808080;
font-size: 0;
display: block;
width:50%;
}
.a {
width: 100px;
height: 80px;
background-color: black;
display: inline-block;
float: left;
}<div id="t">
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
</div>
答案 0 :(得分：3)
因为每个元素的宽度为15％。 6个元素将覆盖父宽度的90％，第7个元素将被强制进入下一行，从而导致前一行中10％的whitepsace。
您可以将15％更改为其他内容，例如16.666％
#t {
background-color: #fff;
font-size: 0;
}
.a {
width: 16.666%;
height: 80px;
background-color: black;
display: inline-block;
}
.a:hover {
background: red;
}<div id="t">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
答案 1 :(得分：0)
你的问题是.a有15％的宽度，因此整个15％将被换成下一行。我的建议是将#t设为.a的倍数，例如90％或105％。如果您不想更改#t，但是如果您可以更改.a，请将.a设为10％或20％。
见这里：
你的html保持不变。
#t {
height: 160px;
width: 90%;
background-color: #808080;
font-size: 0;
display: block;
}
.a {
width: 15%;
height: 80px;
background-color: black;
display: inline-block;
float: left;
}<div id="t">
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
</div>
或：
在这里你也可以使用105％的宽度。 你的html再次保持不变。
#t {
height: 160px;
background-color: #808080;
font-size: 0;
display: block;
}
.a {
width: 10%;
height: 80px;
background-color: black;
display: inline-block;
float: left;
}<div id="t">
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
</div>
另一种解决方案是使用flex：
#t {
height: 160px;
background-color: #808080;
font-size: 0;
display: flex;
}
.a {
width: 15%;
height: 80px;
background-color: black;
display: inline-block;
float: left;
}<div id="t">
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
</div>
答案 2 :(得分：0)
您可以使用一点#t来div .a jQuery之间的black的整体宽度划分。简单的数学。
整个区域似乎是#t。您可以通过设置$(".a").css("width", function() {
var w = $("#t").css("width");
w = Math.floor(parseInt(w.slice(0, -2)) / 9);
// alert(w); // For testing.
return (w + "px");
});的高度来测试它。
#t {
height: 100px;
background-color: green;
font-size: 0;
display: block;
border: 1px solid green;
width: 70%;
}
.a {
height: 80px;
background-color: black;
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="t">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>jQuery
编辑＃1 ：编辑了我的ArrayList<ItemObjects> results = new ArrayList<ItemObjects>();
ItemObjects obj = new ItemObjects(type, sender);
results.add(obj);
代码但仍剩下很少的空间。如果有人有任何想法。免费编辑和建议。
答案 3 :(得分：0)
使用margin-right和:nth-child(n6)
#t {
height: auto;
background-color: gray;
font-size: 0;
overflow:hidden;
}
.a {
width: 15%;
margin-right:2%;
height: 80px;
background-color: black;
display: inline-block;
box-sizing: border-box;
border: solid 1px red;
}
.a:nth-child(6n){
margin-right:0;
}<div id="t">
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
</div>