jquery mobile listview在每个项目之间创建空间

时间:2013-02-18 16:02:41

标签: listview jquery-mobile space

我似乎无法删除每个列表项之间的小空格。该列表比我在这里发布的内容要长得多,但我认为这与该问题没有任何关系。

我试图通过多次重新格式化列表来纠正它,但无济于事。我也引用了jquery移动网站,仍然找不到答案。

我的代码:

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1," />
<!-- Website Title -->
<title>Test
</title>

<!-- Jquery Mobile Theme / Jquery Scripts -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head> 

<!-- Color of Background -->
<body style="background:#6e6e6e">

<!-- Start of Name page -->
<div data-role="page" id="name">

<div data-role="header" data-theme="b">
    <h1>Test</h1>
</div><!-- /header -->

<div data-role="content">   
<p>
  <ul data-role="listview" data-filter="true" data-filter-placeholder="Test..." data-inset="true" data-autodividers="true">
    <li><a href="#link2">Hello</a></li>
    <li><a href="#link3">There</a></li>
    <li><a href="#link4">World</a></li>
    <li><a href="#link5">World2</a></li>
</p>
</div><!-- /content -->

<div data-role="footer" data-position="fixed" data-theme="b">
    <h4>© 2013 ChurchySearch</h4>
</div><!-- /footer -->
</div><!-- /Name page -->

它看起来像这样:http://www.jesseandamanda.com/screenshot.png

建议?

1 个答案:

答案 0 :(得分:10)

当您从JQuery Mobile演示页面复制代码时会发生这种情况。我想你的列表有同样的问题。尝试在每个<li>之前删除不可见的字符以修复它。 看看几行<li>test</li><li>test</li>是否正常。