android - 在 Android Chrome 上查看时 block 之间的空间

Question

我对某些 CSS 内容有疑问。看看:http://codepen.io/anon/pen/rxQQpv .

ul {
  list-style: none;
}
ul li {
  background: #333;
  color: #fff;
  width: 100px;
  float: left;
  text-align: center;
}

<ul>
  <li>Test1</li>
  <li>Test2</li>
</ul>

当我在 Android 谷歌浏览器中打开它时，它看起来像:

Screenshot from my Android Browser

请注意，2 个 li block 之间有一点空间。我该如何删除它？为什么它在那里？

Answer 1

添加与背景颜色相同的边框。它会起作用:

ul li{
   border: 1px solid #333;
}

如果您更喜欢，也可以只在左侧和右侧添加边框。

ul li{
   border-left: 1px solid #333;
   border-right: 1px solid #333;
}