8
votes

Image dans JQuery Mobile Header

J'essaie d'ajouter une image dans l'en-tête de la page Web basée sur My JQuery Mobile.

Je souhaite que l'image soit alignée sur le bord droit et en utilisant CSS à cette fin. Mais les résultats ne sont pas satisfaisants.

(problème *) Il existe un grand espace entre l'image et le bord et il n'est pas non aligné avec le texte de l'en-tête.

voici le Code de l'en-tête: xxx

et voici le code CSS pour la classe Align-droit: xxx

image header jquery-mobile

0 commentaires

4 Réponses :

1
votes

Quelque chose comme ça devrait fonctionner: xxx

0 commentaires

3
votes

basé sur votre exemple de code, vous avez besoin d'un espace entre l'attribut alt code> et la classe class code>.

Vous avez: p>

alt="Low resolution logo" class="align-right"

0 commentaires

26
votes

Pas besoin d'ajouter un style personnalisé ou tel. Jquery-Mobile a déjà des solutions intégrées pour cela. Ajoutez simplement la classe 'ui-btn-gauche' ou 'ui-btn-droite' à votre image (comme s'il s'agissait d'un bouton) et que vous êtes défini tous.

<header data-role="header">
<h1>My App</h1>
<img src="my_logo.png" class="ui-btn-right" />
</header>

0 commentaires

0
votes

Dans mon cas, j'utilisais un lien comme un bouton de mon en-tête et je voulais les mêmes résultats où l'image montrerait dans le coin supérieur droit. J'ai également voulu des attributs supplémentaires ajoutés à l'image telle que non de texte, sans coins, aucun disque, etc. Utilisation de l'UI-BTN-DROITE seul cassé ces autres attributs. Le correctif consistait à inclure à la fois l'UI-BTN et UI-BTN-DROITE à la classe, comme indiqué ci-dessous:

<a href="#entriesPanel" class="ui-btn ui-btn-right ui-icon-bars ui-btn-icon-notext ui-corner-all ui-alt-icon ui-nodisc-icon">Options</a>

0 commentaires