列出具有分隔但没有边距和填充的项目

Question

我试图用列表项覆盖我网站的顶部。

我的列表项目显示如下：

我不知道为什么他们之间会有这种分离。他们没有任何边距和填充。

任何人都知道为什么会这样？

HTML：

        <ul class="listras-lista">
            <li class="listras-lista_item"></li>
            <li class="listras-lista_item"></li>
            <li class="listras-lista_item"></li>
            <li class="listras-lista_item"></li>
            <li class="listras-lista_item"></li>
            <li class="listras-lista_item"></li>
        </ul>

CSS：

.listras-lista {
  list-style: none;
  width: 100%;
}
.listras-lista_item {
  display: inline-block;
  background: #CC00CC;
  width: 20%;
  height: 5px;
  padding: 0;
}

Answer 1

这是造成空间的空白。如果可以，请更改标记，以便</li><li>在一起

Answer 2

这是由display: inline-block;引起的。将其更改为float:left;。