应用错误收集

如何使用list-group-horizontal（boostrap 4）删除<ul>之间的空白？

时间：2019-04-10 17:59:00

标签： html css

我正在为学校做一个小项目。我正在从数据库中打印结果，然后将数据放入3个不同的“列表组项目”中，每一行数据都位于不同的。因此，每一行都是一个ul（我必须打印很多）。问题是每个之间的空间，我真的快疯了。

我尝试了互联网上的所有内容，但确实无法解决我的问题。

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

<node>
    <body>
        some content here to be selected
    </body>
    <anotherTag>
        lorem ipsum
    </anotherTag>
</node>
<node>
    <body>
        different content here to be selected
    </body>
</node>

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

1 个答案:

答案 0 :(得分：-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>