PhoneGap中文网

标题: 如何去掉列表的上边框？ [打印本页]

作者: gundumw100 时间: 2014-6-24 15:58
标题: 如何去掉列表的上边框？

仔细看列表的最上面的边框，似乎有一条1px的分割线，如何去掉它？
我已经把所有可能的边框粗细都设成0了，可还是有这样的分割线存在。

<div><ul data-role="listview" data-inset="true" data-count-theme="a"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span> <li data-icon="arrow" data-iconshadow="false"><a style="padding:16px;" href="#">App Version<span id="appVersion" class="ui-li-count"></span></a></li></div><div><span class="Apple-tab-span" style="white-space:pre"> </span> <li data-icon="arrow" data-iconshadow="false"><a style="padding:16px;" href="" >About us</a></li></div><div><span style="line-height: 1.5;"></ul></span></div>

复制代码

作者: admin 时间: 2014-6-24 16:19
你的代码成乱码了，这个用工具调调看看到底是那个元素出现的边框，对症下药

作者: gundumw100 时间: 2014-6-24 21:20
本帖最后由 gundumw100 于 2014-6-24 21:26 编辑

<ul data-role="listview" data-inset="true" data-count-theme="a">
<li data-icon="arrow" data-iconshadow="false"><a style="padding:16px;" href="#">App Version<span id="appVersion" class="ui-li-count"></span></a></li>
<li data-icon="arrow" data-iconshadow="false"><a style="padding:16px;" href="" >About us</a></li>
</ul>

复制代码

在使用<li>元素的时候，JQM会默认在<li>之间加一条分割线，如何去掉默认的分割线，或者修改它的粗细？

作者: admin 时间: 2014-6-25 12:36

gundumw100 发表于 2014-6-24 21:20
在使用元素的时候，JQM会默认在之间加一条分割线，如何去掉默认的分割线，或者修改它的粗细？ ...

改css 火狐firebug 调试工具或者谷歌调试工具试试

作者: gundumw100 时间: 2014-6-27 16:03
原来需要修改.ui-li,将border-top-width: 1px;改成需要的粗细就可以了。
这条线不是li的，而是div的，JQM在生成的时候将ul里的li元素外面再套两个div元素，这条线就是div中产生的，难怪我怎么调li都没什么效果。
.ui-li{
margin: 0;
overflow: visible;
text-align: left;
border-width: 0;
border-top-width: 0px;
border-bottom-width: 0px;/*我添的*/
}

这也太坑人了，为什么JQM在li外面还要再生成2个div呢？这样层层嵌套，就不考虑效率？

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)