为什么我的迷你按钮在jQuery Mobile的列表视图中如此之大？

Question

我在jQuery Mobile中有一个列表视图，其中包含删除按钮。

<ul data-role='listview' class='animalList'>
    <li data-animal-prey-id='50'>Elephant<a data-role='button' data-icon='delete' data-iconpos='notext'>Delete</a></li>
    <li data-animal-prey-id='50'>Rhino<a data-role='button' data-icon='delete' data-iconpos='notext'>Delete</a></li>
    <li data-animal-prey-id='50'>Ostrich<a data-role='button' data-icon='delete' data-iconpos='notext'>Delete</a></li>  
</ul>​

为什么删除按钮显示如此之大？我希望它们是动物名称右侧的小按钮。

这就是我的意思。 http://jsfiddle.net/z2nFK/

Answer 1

设置小提琴的方式存在很多问题。

1. 您的css使用JQM 1.1版，但js使用JQM版本1.0.1。
2. 此外，JQM 1.0.1与JQuery 1.7.2不兼容，并且存在一些已知问题。
3. 您的列表视图格式不正确。

以下是所有这些修复的示例。 http://jsfiddle.net/codaniel/47SvT/1/只需按下顶部的前叉按钮即可制作自己的小提琴版本。

请注意，我使用了拆分列表视图而不是默认列表。我相信这可能会对你的情况有所帮助。另请注意，动物和删除都包含在<a>标记内。我希望这有帮助！