li 项之间的空间答案

【问题标题】：Space between li itemsli 项之间的空间
【发布时间】：2012-09-12 14:41:10
【问题描述】：

我正在尝试使用 iscroll 创建一个可滚动的水平列表。该列表似乎工作得很好。我面临的问题是，每个 li 项目之间都有一些空间。我尝试了我所知道的一切。但我只是不能删除那些 li 项目之间的空间。请查看下面的演示 Demo

【问题讨论】：

您只需要在使用display: inline-block 时删除</li> 和<li> 标记之间的所有空格。

【解决方案1】：

删除display: inline-block;并使用float:left;

#scroller li {
    background: #f7f7f7; /* Old browsers */
    background: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, #D8D3D3), color-stop(0.5, #FBFBFB) ); 
    float:left;
    width: 120px;
    height: 100%;
    border:none;
    margin:0px;
}

http://jsbin.com/uzucev/6/edit

希望这会有所帮助

【讨论】：

它有效，但你能告诉我为什么display: inline-block; 在li 标记之间创建一个间隙吗？

【解决方案2】：

在你的 CSS 中添加 display:table-cell 属性

#scroller li {
background: none repeat scroll 0 0 #F7F7F7;
border: medium none;
display: table-cell;
height: 100%;
margin: 0;
width: 120px;

}

我希望它对你有用。

【讨论】：