如何清除之間的空白 <ul> s，帶有水平列表組（boostrap 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>