项目之间的jquery mobile listview空间/如何删除listview边框答案

【问题标题】：jquery mobile listview space between items / how to remove listview border项目之间的jquery mobile listview空间/如何删除listview边框
【发布时间】：2014-04-02 16:18:33
【问题描述】：

我想在 jquery mobile 的列表视图的列表项之间放置一个空格。为此，我为每个列表项设置了边距。到目前为止，这工作正常，但列表视图的左侧和右侧有一个边框，可以在间隙中特别看到。例如，我有这个 jsfiddle：http://jsfiddle.net/2BhAd/3/。我试图通过将列表视图的边框设置为无来解决问题，但这不起作用。 CSS：

.listitem {
   margin-top: 10px !important;
}
#list {
   border:none !important;
}

HTML：

<ul id="list" data-role="listview" data-theme="b" data-inset="true">
   <li class="listitem"><a href="#">
        <img src="http://placehold.it/100x100">
        <h2>Broken Bells</h2>
        <p>Broken Bells</p></a>
    </li>
    <!-- ... -->
</ul>

【问题讨论】：

如果你不想要角落除了下面的正确答案添加这个css代码---- .ui-corner-all { -webkit-border-radius: 0px;边框半径：0px； }

标签： html css listview jquery-mobile

【解决方案1】：

试试

.listitem {
    margin-top: 10px !important;
}
#list{
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}
#list .ui-li {
    border: none;
}

这会从列表和单个项目中删除边框。它还消除了列表上的阴影效果。

更新FIDDLE

【讨论】：