防止'；显示：表格'；仅在Android上垂直堆叠

我有一个简单的社交媒体菜单，上面有一些不同的链接。在Chrome、Safari、FF、IE、iOS设备中，一切都会正常显示，即：

但在Android设备上，图标水平堆叠：

HTML:

---

您最好使用CSS执行以下操作：

ul#menu-social {
  margin: 0 auto;
  height:40px;
  display: table;
  padding: 0;
}
ul#menu-social li {
  display: table-cell;
  padding: 0;
  text-align: center;
  width: 20%;
}

---

ul

获取

display:table

，列表项为

display:table单元格

。这将确保列表项与站点并排。

您发布的html不能是您正在使用的html，您可以发布实际的html吗，因为它可能包含问题？删除

显示：表

@LinkinTED显示：表用于在不同宽度之间均匀分布图标，因为它位于响应站点上。Hmm。将列表项设置为

display:table

不会像您建议的那样“均匀分布图标”。

宽度：20%

（与

浮点值一起）可以实现这一点。正如@LinkinTED所说，您可以删除它，并得到相同的结果。您可以放下
浮动
并将项目设置为
display:table cell
。这应该是你想要的（如果Android浏览器支持的话）。我拿了这个，在
ul#menu social
上添加了
width:100%
，一切看起来都很棒。谢谢你的帮助！
ul#menu-social {
  margin: 0 auto;
  text-align: center;
  height:40px;
}
ul#menu-social li {
  float:left;
  display: table;
  padding: 0;
  text-align: center;
  width: 20%;
  margin: 0 auto;
  background: none;
}

ul#menu-social {
  margin: 0 auto;
  height:40px;
  display: table;
  padding: 0;
}
ul#menu-social li {
  display: table-cell;
  padding: 0;
  text-align: center;
  width: 20%;
}