如何删除列表视图上第一项的边距？答案

【问题标题】：How to remove the margin of the first item on the listview?如何删除列表视图上第一项的边距？
【发布时间】：2015-01-20 10:42:23
【问题描述】：

我在这个列表视图中使用 Jquery mobile。我无法摆脱第一项的边距。

这是我的 html 代码：

<ul data-role="listview" data-inset="true">
            <li data-icon="false"> 
                <a href="#meals"><img src="images/meal.jpg" alt="meal" /><h2>Meals</h2><p>Enjoy the sweet Tinulang Barbeque ni Mang Juan for $99.</p></a> 
            </li>
            <li data-icon="false">
                <a href="#desserts"><img src="images/desserts.jpg" alt="dessert"/><h2>Desserts</h2><p>Taste the Sea of Pier 3 with Condensed milk for $11.</p></a> 
            </li>
            <li data-icon="false">
                <a href="#beverages"><img src="images/beverages.jpg" alt="beverage"/><h2>Beverages</h2><p>Drink the Water of Pandora with Amonium Nitrate for $25.</p></a> 
            </li>
</ul>

我尝试了这个 css 代码，但还是一样：

.listitem {
    margin-top: 0px !important;
}

#list{
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

#list .ui-li {
    border: none;
}

有什么想法吗？

【问题讨论】：

:first-child 选择器css-tricks.com/almanac/selectors/f/first-child
其他浏览器没有问题，只出现在冰淇淋三明治设备上。

标签： css html listview jquery-mobile

【解决方案1】：

通过应用内联 style="margin:0 !important" 进行检查，如果它仍然不能解决您的问题，然后检查检查元素是否有填充或边距

【讨论】：

【解决方案2】：

第一项上方的边距实际上是 UL 元素的顶部边距。所以假设#list是你的UL，只需添加margin-top: 0;：

#list{
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    margin-top: 0;
}

DEMO

【讨论】：