删除列表中的空格

Question

伙计，我在public class gameBoard { setName SN; public gameBoard(setName SN) { this.SN = SN } ... rest of the code } 列表中有一些空格。我尝试设置ul和padding: 0而不工作我在左边界附近再次有空间。 检查我的截图：

这是我的代码：

margin: 0

div.topbar-list > ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
div.topbar-list > ul > li {
  padding: 5px;
  display: inline-block;
  border-left: 1px solid #ccc;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
div.topbar-list > ul > li:first-child {
  border-right: 0 none;
}
div.topbar-list > ul > li a {
  color: #333;
}
div.topbar-list > ul li:hover {
  background-color: #eee;
}
div.topbar-list > ul > li a:hover {
  text-decoration: none;
}

此外，我尝试从<div class="topbar-list"> <ul> <li><a href="#"><i class="fa fa-phone-square"></i> +381 123 342 543</a> </li> <li><a href="#"><i class="fa fa-mobile-phone"></i> +381 123 432 542</a> </li> <li><a href="#"><i class="fa fa-mobile-phone"></i> +381 315 645 122</a> </li> </ul> </div>调试它，但没有任何填充和固定宽度。 我怎么能删除那个空白区域？

Answer 1

Use Float:left; instead of display:inline-block;

因为display：inline-block总是放一些间距。

Answer 2

由＆＃34;显示引起的：内联块＆＃34;。要修复它，您可以给元素一个负余量。