如何删除列表视图中第一项的边距？

Question

我在这个列表视图中使用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;
}

有什么想法吗？

Answer 1

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

Answer 2

第一项上方的边距实际上是UL元素的上边距。因此，假设#list是您的UL，只需添加margin-top: 0;：

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

  

<强> DEMO