Warum sind meine Mini-Schaltflächen in meinen Listenansichten in jQuery Mobile so groß?

Question

Ich habe eine Listenansicht in jQuery Mobile mit Löschtasten in ihnen.

<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>​ 

Warum werden die Löschschaltflächen so groß angezeigt? Ich möchte, dass sie kleine Knöpfe rechts neben den Tiernamen sind.

Hier ist was ich meine. http://jsfiddle.net/z2nFK/

Answer 1

Es gibt eine Reihe von Problemen mit der Art, wie Sie Ihre Geige eingerichtet haben.

1. Verwenden Sie JQM Version 1.1 für Ihre CSS aber mit JQM Version 1.0.1 für Ihre js.
2. Auch JQM 1.0.1 ist nicht kompatibel mit JQuery 1.7.2 und hat einige bekannte Probleme.
3. Ihre Listenansicht ist nicht korrekt formatiert.

Hier ist ein Beispiel für all dies behoben. http://jsfiddle.net/codaniel/47SvT/1/ Drücken Sie einfach den Gabelknopf oben, um Ihre eigene Version dieser Geige zu machen.

Beachten Sie, dass ich die Split-Listview anstelle der Standardansicht verwendet habe. Ich glaube, das könnte für Ihre Situation besser funktionieren. Beachten Sie auch, dass sowohl das Tier als auch das Löschen in einem <a> Tag eingeschlossen ist. Ich hoffe das hilft!