在Android Chrome上查看时块之间的空格

Question

我遇到一些CSS问题。请查看：http://codepen.io/anon/pen/rxQQpv。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我在Android Google Chrome中打开相同内容时，它看起来像：

Screenshot from my Android Browser

请注意，2 li块之间有一点空间。我该如何删除？为什么会这样？

Answer 1

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

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

或者，如果你更喜欢，你可以只在左右添加边框。

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

Answer 2

我认为您必须设置 li css规则 margin:0和padding:0来解决您的问题。

Answer 3

尝试将display: block添加到您的li元素：

ul li {
    display: block;
}

您正在测试哪个Android设备/版本？我无法重现这个问题。

Answer 4

我找到的最佳解决方案是使用另一个div，它们跨越这两个具有相同颜色的div的背景。我的webapp连续超过20个这样的块。因此，为他们添加边框并不是很好。这种解决方案效果最好。