显示内联块的换行符上的额外空白区域

Question

以下是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>

Answer 1

因为每个元素的宽度为15％。 6个元素将覆盖父宽度的90％，第7个元素将被强制进入下一行，从而导致前一行中10％的whitepsace。

您可以将15％更改为其他内容，例如16.666％

＆＃13;

＆＃13;

#t {
  background-color: #fff;
  font-size: 0;
}

.a {
  width: 16.666%;
  height: 80px;
  background-color: black;
  display: inline-block;
}

.a:hover {
  background: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你的问题是.a有15％的宽度，因此整个15％将被换成下一行。我的建议是将#t设为.a的倍数，例如90％或105％。如果您不想更改#t，但是如果您可以更改.a，请将.a设为10％或20％。

见这里：

你的html保持不变。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或：

在这里你也可以使用105％的宽度。 你的html再次保持不变。

＆＃13;

＆＃13;

#t {
    height: 160px;
    background-color: #808080;
    font-size: 0;
    display: block;
}

.a {
    width: 10%;
    height: 80px;
    background-color: black;
    display: inline-block;
    float: left;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另一种解决方案是使用flex：

＆＃13;

＆＃13;

#t {
    height: 160px;
    background-color: #808080;
    font-size: 0;
    display: flex;
}

.a {
    width: 15%;
    height: 80px;
    background-color: black;
    display: inline-block;
    float: left;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用一点#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); 代码但仍剩下很少的空间。如果有人有任何想法。免费编辑和建议。

Answer 4

使用margin-right和:nth-child(n6)

为每个不是6的倍数的块提供2％的边距权限

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