html - 如何使用 list-group-horizo​​ntal (bootstrap 4) 删除 之间的空白区域？

Question

我正在为学校做一个小元素。我正在打印数据库中的结果，并将数据放入 3 个不同的“列表组项”中，每一行数据都在不同的 .所以，它是每一行的 ul(我必须打印很多行)。问题是每个 之间的空间，我真的快疯了。

我尝试了所有在互联网上找到的方法，但确实无法解决我的问题。

我希望不同行之间的空间完全消失。感谢任何人:)

.list-group-horizontal {
  margin: 0;
  padding: 0;
}
.list-group-horizontal .list-group-item {
  display: inline-block;
    margin-bottom: 0;
    margin-left:-4px;
    margin-right: 0;
    border-right-width: 0;
    width: 33%;
    height: 55px;
    overflow: auto;
    text-align: center;
    overflow-y: hidden;
    white-space: nowrap;
    border: 1px solid #d00;
}
.list-group-horizontal .list-group-item:first-child {
    border-top-right-radius:0;
    border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
    border-top-right-radius:4px;
    border-bottom-left-radius:0;
    border-right-width: 1px;
}

<ul class="list-group-horizontal">
  <li class="list-group-item">Nome Libro</li>
  <li class="list-group-item">Data Prestito</li>
  <li class="list-group-item">Data Riconsegna</li>
</ul>
<ul class="list-group-horizontal">
  <li class="list-group-item">I Robot</li>
  <li class="list-group-item">2018-01-19 03:14:07</li>
  <li class="list-group-item">2019-01-19 03:14:07</li>
</ul>

Answer 1

.list-group-horizontal {
  margin: 0;
  padding: 0;
}
.list-group-horizontal .list-group-item {
  display: inline-block;
    margin-bottom: 0;
    margin-left:-4px;
    margin-right: 0;
    border-right-width: 0;
    width: 33%;
    height: 55px;
    overflow: auto;
    text-align: center;
    overflow-y: hidden;
    white-space: nowrap;
    border: 1px solid #d00;
}
.list-group-horizontal .list-group-item:first-child {
    border-top-right-radius:0;
    border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
    border-top-right-radius:4px;
    border-bottom-left-radius:0;
    border-right-width: 1px;
}

<ul class="list-group-horizontal">
  <li class="list-group-item">Nome Libro</li>
  <li class="list-group-item">Data Prestito</li>
  <li class="list-group-item">Data Riconsegna</li>
</ul>
<ul class="list-group-horizontal">
  <li class="list-group-item">Nome Libro</li>
  <li class="list-group-item">Data Prestito</li>
  <li class="list-group-item">Data Riconsegna</li>
</ul>